简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  html lock page (js mask layer pop-up div effect)_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 18:43:161212browse
Copy code The code is as follows:




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











aa
bb

[br]



Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Several reference codes for javascript operations on word_javascript skillsNext article：Several reference codes for javascript operations on word_javascript skills

Related articles

See more