js writes a pop-up layer and lock screen effect implementation code_javascript skills

Copy code The code is as follows: a Pop up layer and lock screen effect Test Test

Test

Test Test

Test

function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//Width of prompt window msgh=100;//Height of prompt window titleheight=25 //Title height of prompt window bordercolor="#336699";//Border color of prompt window titlecolor="#99CCFF";//Title color of prompt window var sWidth,sHeight; sWidth=document.body.offsetWidth;//Get the window width sHeight=screen.height;//Get the screen height var bgObj=document.createElement("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 other windows cannot be operated 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);//Display this div after setting 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.6 em 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 title to be placed in 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="Close"; title.onclick=function() { document.body.removeChild(bgObj);//Remove the div layer covering 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); }