一个弹出层并锁屏效果
成功志
一个弹出层并锁屏效果
2012-11-23 ok12

代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>一个弹出层并锁屏效果</title>

</head>

<body>

<div>

  <div>           

   <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

   <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>

   <input type="button" value="点击这里" onClick="sAlert('测试弹出层并锁屏效果');" />

  </div>

</div>

<script language="javascript">

function sAlert(str)

{

 var msgw,msgh,bordercolor;

    msgw=400;//提示窗口的宽度

    msgh=100;//提示窗口的高度

    titleheight=25 //提示窗口标题高度

    bordercolor="#336699";//提示窗口的边框颜色

    titlecolor="#99CCFF";//提示窗口的标题颜色


 var sWidth,sHeight;

    sWidth=document.body.offsetWidth;//获取窗口宽度

    sHeight=screen.height;//获取屏幕高度

   

 var bgObj=document.createElement("div");//关键在这里，原理：在body中创建一个div，并将其宽度与高度设置为覆盖整个窗体，如此一来就无法对其它窗口时行操作

 bgObj.setAttribute('id','bgDiv');

    bgObj.style.position="absolute";

 bgObj.style.top="0";

    bgObj.style.background="#777";

    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";

    bgObj.style.opacity="0.6";

    bgObj.style.left="0";

    bgObj.style.width=sWidth + "px";

    bgObj.style.height=sHeight + "px";

    bgObj.style.zIndex = "10000";

    document.body.appendChild(bgObj);//设置完此div后将其显示出来

 

 var msgObj=document.createElement('div');//创建一个消息窗口

 msgObj.setAttribute("id","msgDiv");

    msgObj.setAttribute("align","center");

    msgObj.style.background="white";

    msgObj.style.border="1px solid " + bordercolor;

 msgObj.style.position = "absolute";

 msgObj.style.left = "50%";

 msgObj.style.top = "50%";

 msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";

 msgObj.style.marginLeft = "-225px" ;

 msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";

 msgObj.style.width = msgw+"px";

 msgObj.style.height = msgh+"px";

 msgObj.style.textAlign = "center";

 msgObj.style.lineHeight ="25px";

 msgObj.style.zIndex = "10001";

 

 var title=document.createElement("h4"); //创建一个标题，以备放置在消息层


 title.setAttribute("id","msgTitle");

    title.setAttribute("align","right");

    title.style.margin="0";

    title.style.padding="3px";

    title.style.background=bordercolor;

    title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

    title.style.opacity="0.75";

    title.style.border="1px solid " + bordercolor;

    title.style.height="18px";

    title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";

    title.style.color="white";

    title.style.cursor="pointer";

 title.innerHTML="关闭";

 title.onclick=function()

 {

  document.body.removeChild(bgObj);//移除覆盖整个窗口的div层

  document.getElementById("msgDiv").removeChild(title);//移除标题

  document.body.removeChild(msgObj);//移除消息层

 }

 document.body.appendChild(msgObj);

 document.getElementById("msgDiv").appendChild(title);

    var txt=document.createElement("p");

    txt.style.margin="1em 0"

    txt.setAttribute("id","msgTxt");

    txt.innerHTML=str;

    document.getElementById("msgDiv").appendChild(txt);

}

</script>

</body>

</html>