<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>A pop-up layer and lock screen effect</title>
</head>
<body>
<div>
<div>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>
<input type="button" value="click here" onClick="sAlert('Test the pop-up layer and lock screen effect');" />
</div>
</div>
<script language="javascript">
function sAlert(str)
{
var msgw,msgh,bordercolor;
msgw=400;//The width of the prompt window
msgh=100;//The height of the prompt window
titleheight=25 //prompt window title height
bordercolor="#336699";//Border color of prompt window
titlecolor="#99CCFF";// Title color of prompt window
var sWidth,sHeight;
sWidth=;//Get window width
sHeight=;//Get screen height
var bgObj=("div");//The key is here, the principle: create a div in the body and set its width and height to cover the entire form, so that it is impossible to operate on other windows in a time-lapse manner
('id','bgDiv');
="absolute";
="0";
="#777";
="progid:(style=3,opacity=25,finishOpacity=75";
="0.6";
="0";
=sWidth + "px";
=sHeight + "px";
= "10000";
(bgObj);//Show it after setting this div
var msgObj=('div');//Create a message window
("id","msgDiv");
("align","center");
="white";
="1px solid " + bordercolor;
= "absolute";
= "50%";
= "50%";
="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
= "-225px" ;
= -75++"px";
= msgw+"px";
= msgh+"px";
= "center";
="25px";
= "10001";
var title=("h4"); //Create a title for placement in the message layer
("id","msgTitle");
("align","right");
="0";
="3px";
=bordercolor;
="progid:(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
="0.75";
="1px solid " + bordercolor;
="18px";
="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
="white";
="pointer";
="Close";
=function()
{
(bgObj);//Remove the div layer covering the entire window
("msgDiv").removeChild(title);//Remove the title
(msgObj);//Remove the message layer
}
(msgObj);
("msgDiv").appendChild(title);
var txt=("p");
="1em 0"
("id","msgTxt");
=str;
("msgDiv").appendChild(txt);
}
</script>
</body>
</html>