您的位置:首页 > Web前端 > JavaScript

javascript弹出提示框

2017-02-09 23:28 225 查看
先创建一个bodybg将整个页面覆盖,接着创建div将其绝对定位与页面

/**
*
* @param tip 显示的消息
* @param flag 是否刷新  true or false
*/
function tipdialog(tip,flag){
//获取页面高和宽
var iWidth=document.documentElement.clientWidth;
var iHeight=document.documentElement.clientHeight;
var height=Math.max(document.body.clientHeight, iHeight);

var top=(parseInt(height)-300)/2;
var left=(parseInt(iWidth)-300)/2;
//创建覆盖页面的div
var bodybg=document.createElement("div");
bodybg.id="bodybg";
bodybg.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+
Math.max(document.body.clientHeight, iHeight)
+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bodybg);

bodybg.onclick=function(){

if(flag){
location.reload();
}

//关闭
document.getElementById("dialogbg").style.display="none";

//$("#dialogbg").fadeOut();
document.body.removeChild(bodybg);
document.body.removeChild(dialogbg);
};
//创建弹出框div
var dialogbg=document.createElement("div");
dialogbg.id="dialogbg";
dialogbg.style.cssText="width:300px;height:150px;position: absolute;overflow: hidden;z-index: 102;" +
"background-color: white;color:red;border-radius:3px;box-shadow: 0px 0px 10px rgba(0,0,0,.35);display: none;";
dialogbg.style.top=top+"px";
dialogbg.style.left=left+"px";

var titlebg=document.createElement("div");
titlebg.style.cssText="width:300px;color:black;height: 30px;background-color: #93e0e6;text-align: center; line-height:30px;";
titlebg.innerHTML="提示信息";

var tipbg=document.createElement("div");
tipbg.style.cssText="width: 300px;height: 120px;text-align: center;line-height: 120px;";

tipbg.innerHTML=tip;

document.body.appendChild(dialogbg);
dialogbg.appendChild(titlebg);
dialogbg.appendChild(tipbg);

//显示

document.getElementById("dialogbg").style.display="block";

//$("#dialogbg").fadeIn();

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: