html lock page (js mask layer pop-up div effect)_javascript skills-JS Tutorial-php.cn

html lock page (js mask layer pop-up div effect)_javascript skills

WBOY

Release： 2016-05-16 18:43:16

Original

1270 people have browsed it

Copy code The code is as follows:

UntitledDocument
<script> function createIframe(){ //mask遮罩层 var newMask=document.createElement("div"); newMask.id="mDiv"; newMask.style.position="absolute"; newMask.style.zIndex="1"; _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); // _scrollHeight = Math.max(document.body.offsetHeight,document.documentElement.scrollHeight); newMask.style.width=_scrollWidth+"px"; newMask.style.height=_scrollHeight+"px"; newMask.style.top="0px"; newMask.style.left="0px"; newMask.style.background="#33393C"; //newMask.style.background = "#FFFFFF"; newMask.style.filter="alpha(opacity=40)"; newMask.style.opacity="0.40"; newMask.style.display='none'; var objDiv=document.createElement("DIV"); objDiv.id="div1"; objDiv.name="div1"; objDiv.style.width="480px"; objDiv.style.height="200px"; objDiv.style.left=(_scrollWidth-480)/2+"px"; objDiv.style.top=(_scrollHeight-200)/2+"px"; objDiv.style.position="absolute"; objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上 objDiv.style.display="none"; //让objDiv预先隐藏 objDiv.innerHTML=' <div id="drag" style="position:absolute;height:20px;width:100%;z-index:10001;top:0; background-color:#0033FF;cursor:move ;" align="right"> <input type=button value="X" onclick="HideIframe(document.getElementById(\'mDiv\'),document.getElementById(\'div1\'));"/> </div>'; //Changed the X button to trigger the close event. objDiv.style.border="solid #0033FF 3px;"; var frm=document.createElement("iframe"); frm.id="ifrm"; frm.name= "ifrm"; frm.style.position="absolute"; frm.style.width="100%"; frm.style.height=180; frm.style.top =20; frm.style.display=''; frm.frameborder=0; objDiv.appendChild(frm); // newMask.appendChild(objDiv); //The problem is Here: you change the div where the frame is located into a child element of newMask. When the transparency of newMask changes, it will of course affect the frame document.body.appendChild(newMask); document.body.appendChild(objDiv ); var objDrag=document.getElementById("drag"); var drag=false; var dragX=0; var dragY=0; objDrag.attachEvent("onmousedown ",startDrag); function startDrag(){ if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV"){ objDrag.setCapture(); objDrag.style.background="#0000CC"; drag=true; dragX=event.clientX; dragY=event.clientY; } }; objDrag .attachEvent("onmousemove",Drag); function Drag(){ if(drag){ var oldwin=objDrag.parentNode; oldwin.style.left=oldwin.offsetLeft event. clientX-dragX; oldwin.style.top=oldwin.offsetTop event.clientY-dragY; oldwin.style.left=event.clientX-100; oldwin.style.top=event.clientY- 10; dragX=event.clientX; dragY=event.clientY; } }; objDrag.attachEvent("onmouseup",stopDrag); function stopDrag() { objDrag.style.background="#0033FF"; objDrag.releaseCapture(); drag=false; }; } function htmlEditor(){ var frm=document.getElementById("ifrm"); var objDiv=document.getElementById("div1"); var mDiv=document.getElementById("mDiv"); mDiv.style. display=''; var iframeTextContent=''; iframeTextContent =' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'; iframeTextContent = ' <html xmlns="http://www.w3.org/1999/xhtml">'; iframeTextContent =' <head>'; iframeTextContent =' <meta http-equiv= "Content-Type" content="text/html; charset=gb2312" />'; iframeTextContent =' </head>'; iframeTextContent =' <body>'; iframeTextContent =' <table>'; iframeTextContent =' <tr>'; iframeTextContent =' <td>Name </td>'; iframeTextContent =' <td> < input type="text" value="" /> </td>'; iframeTextContent =' </tr>'; iframeTextContent =' <tr>'; iframeTextContent = ' <td>Email </td>'; iframeTextContent =' <td> <input type="text" value="" /> </td>'; iframeTextContent = ' </tr>'; iframeTextContent =' <tr>'; iframeTextContent =' <td> <input type="button" id="btGo" value="Go" /&gt ; </td>'; iframeTextContent =' </tr>'; iframeTextContent =' </table>'; iframeTextContent =' </body>'; iframeTextContent =' </html>'; frm.contentWindow.document.designMode='off'; frm.contentWindow.document.open(); frm.contentWindow.document.write(iframeTextContent ); frm.contentWindow.document.close(); objDiv.style.display = ""; //Display floating div var objGo=frm.contentWindow.document.getElementById("btGo" ); objGo.attachEvent("onclick",function (){ HideIframe(mDiv,objDiv); }); } function HideIframe(mDiv,objDiv) { mDiv.style.display='none'; objDiv.style.display = "none"; //Hide the floating div } </script>
< /head>

aa
bb

[br]