Copy codeThe Code is as follows: <! 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> a pop-up layer with screen lock effect </title>
</Head>
<Body>
<Div>
<Div>
<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 screen lock 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 // The title height of the prompt window
Bordercolor = "#336699"; // specifies the border color of the prompt window.
Titlecolor = "#99 CCFF"; // The title Color of the prompt window
Var sWidth, sHeight;
SWidth = document. body. offsetWidth; // obtain the window width.
SHeight = screen. height; // obtain the screen height
Var bgObj = document. createElement ("div"); // the key here, Principle: Create a div in the body and set its width and height to overwrite the entire form, in this way, you cannot perform operations on other windows.
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); // After setting this div, display it
Var msgObj = document. createElement ('div '); // create a message window
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 = -7520.document.doc umentElement. 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"); // create a title for storage at the message layer.
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 = "disabled ";
Title. onclick = function ()
{
Document. body. removeChild (bgObj); // remove the div layer that overwrites the entire window
Document. getElementById ("msgDiv"). removeChild (title); // remove the title
Document. body. removeChild (msgObj); // remove the message layer
}
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>
