div弹出层，带关闭功能

使用系统自带的alert()弹出框提示信息不美观，所以做一个div层来弹出友好信息

自我赶脚挺好看的，不好看就不会放上去

 

 

代码上：

<!--信息提示层-->

<div id="message_box" style="position:absolute;

left:350px;top:160px;width:300px;height:150px;

filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);

z-index:1000; visibility:hidden">

<div id= "message" style="border:1px #95BDD4 solid;width:95%; height:95%; background:#fff; color:#036; font-size:14px; line-height:150%; border-top-left-radius: 7px;border-top-right-radius: 7px; border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;">

<!-- DIV弹出状态行：标题、关闭按钮 -->

<div style="background:#95BDD4; height:15%;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px; padding:3 5 0 5; color:#03F" >

<span style="display:inline;width:100px; text-align:left;font-size:140%; float:left; font-weight:bold">提示信息</span>

<div style="display:inline; cursor:pointer" onclick="closeProc()">

<span style="float:right;font-size:140%">×</span></div>

</div>

<div style="text-align:center; padding:40px 0 0 0">

<span id="msg" style="font-size:13px;"></span>

</div>

</div>

</div>

JS代码：

function msg()

{

  message_box.style.visibility='visible';

 //创建灰色背景层

  procbg = document.createElement("div"); 

  procbg.setAttribute("id","mybg");

  procbg.style.margin="0"; 

  procbg.style.overflowX="auto";

  procbg.style.background = "#000"; 

  procbg.style.width = "100%"; 

  procbg.style.height = "100%"; 

  procbg.style.position = "absolute"; 

  procbg.style.top = "0"; 

  procbg.style.left = "0"; 

  procbg.style.zIndex = "500"; 

  procbg.style.opacity = "0.2"; 

  procbg.style.filter = "Alpha(opacity=20)"; 

  //背景层加入页面

  document.body.appendChild(procbg);

  document.body.style.overflow = "hidden";

}

//关闭功能

function closeProc()

{

   message_box.style.visibility='hidden';

   procbg.style.visibility = "hidden";

}

如转载，请标明出处，谢谢合作