<ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <title> click on the button on the page, pop a layer, background dimmed </title> < Script type= "Text/javascript" src= "js/newdiv.js" ></script> <meta http-equiv= "Content-type" text/html; charset=gb2312 "/> </pead> <body> <p > Click on the button on the page, pop a layer, background dimmed </p> <input type=" button "Onc lick= "Salert" (' Test effect, eh! The results are not bad! '); "Value=" click here "/> <input type= button" id= "BTN" value= "test"/> </body> </ptml> <script Lang Uage= "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//Hint window caption height bordercolor= "#336699";/Prompt window border color titlecolor= "#99CC FF ";//Hint window title color var swidth,sheight; swidth=document.body.offsetwidth;//Browser Work Area page width sheight=screen.height;//screen height (vertical resolution)//Background layer (size is the same as window active area, that is, when a dialog box is displayed, Background shown as radial transparent gray) var bgobj=document.createelement ("div");//Create a Div object (background layer)//define Div property, that is, equal to//<div id= "Bgdiv" style= "Position:absolute; top:0; Background-color: #777; Filter:progid:DXImagesTransform.Microsoft.Alpha (style=3,opacity=25,finishopacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000; "> </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)//Add the Div object var msgobj=document.createelement ("div")///Create a Div object (hint box layer)/// Defines the div attribute, which is equivalent to//<div id= "Msgdiv" align= "center" style= "Background-color:white"; border:1px solid #336699; Position:absolute; left:50%; top:50%; Font:12px/1.6em Verdana,geneva,arial,helvetica,sans-serif; margin-left:-225px; MARGIN-TOP:NPX; width:400px; height:100px; Text-aLign:center; line-height:25px; z-index:100001; "> </div> msgobj.setattribute (" id "," msgdiv "); Msgobj.setattribute ("Align", "center"); msgobj.style.background= "White"; Msgobj.style.border= "1px solid"; 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");//Create a H4 object (cue box title bar)//define H4 properties that are equivalent to//<H4 id= "Msgtitle" align= "right" styl E= "margin:0; padding:3px; Background-color: #336699; Filter:progid:DXImageTransform.Microsoft.Alpha (startx=20, starty=20, finishx=100, finishy=100,style=1,opacity=75, FINISHOPACITY=100); opacity:0.75; Border:1px solid #336699; height:18px; FONT:12PX Verdana,geneva,arial,helvetica,sans-serif; Color:white; Cursor:pointer; "onclick=" > Close </p> 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"; Title.style.height= "18px"; Title.style.font= "12px Verdana, Geneva, Arial, Helvetica, Sans-serif"; title.style.color= "White"; title.style.cursor= "Pointer"; Title.innerhtml= "Close"; Title.onclick=removeobj; var button=document.createelement ("input");//Create an Input object (cue box button)//define input properties, which is equivalent to//<input type= "button" align= Center "style=" width:100px; Align:center; margin-left:250px; margin-bottom:10px; "value=" Off "> Button.setattribuTe ("Type", "button"); Button.setattribute ("value", "close"); Button.style.width= "60px"; button.style.align= "center"; Button.style.marginleft= "250px"; Button.style.marginbottom= "10px"; Button.style.background=bordercolor; Button.style.border= "1px solid"; button.style.color= "White"; Button.onclick=removeobj; function Removeobj () {//Click on the event triggered by the title bar Document.body.removeChild (bgobj);//delete the background layer div document.getElementById ("Msgdiv"). RemoveChild (title);//Remove the title bar of the Balloon Document.body.removeChild (msgobj);//Remove hint box layer} document.body.appendChild (msgobj); Inside the body Add a balloon div object msgobj document.getElementById ("Msgdiv"). AppendChild (title);//Add title bar object to the Hint box div title var txt= Document.createelement ("P");//Create a P object (cue box hint)//define the properties of P, that is, equal to//<p style= "Margin:1em 0;" id= "msgtxt" > Test results &L t;/p> txt.style.margin= "1em 0" Txt.setattribute ("id", "msgtxt"); txt.innerhtml=str;//is derived from the parameter value document.getElementById ("Msgdiv") from the function call. appendchild (TXT);//Add a Hint object txt to the hint box div document.getElementById ("MsGdiv "). appendchild (button);//Add buttons to box div </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Note the style.position and Style.zindex two properties.
