ホームページ > 記事 > ウェブフロントエンド > htmlロックページ（jsマスクレイヤーポップアップdiv効果）_javascriptスキル
htmlロックページ（jsマスクレイヤーポップアップdiv効果）_javascriptスキル
- WBOYオリジナル
- 2016-05-16 18:43:161212ブラウズ
コードをコピー コードは次のとおりです:
<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>//閉じるイベントをトリガーするように X ボタンを変更しました。 <br>objDiv.style.border="solid #0033FF 3px;"; <br>var frm=document.createElement("iframe"); <br>frm.id="ifrm"; "ifrm"; <br>frm.style.position="絶対"; <br>frm.style.height=180; =20; <br>frm.frameborder=0; <br>objDiv.appendChild(objDiv);ここでは、フレームが配置されている div を newMask の子要素に変更します。 newMask の透明度が変更されると、当然、フレーム <br>document.body.appendChild(newMask); に影響します。 body.appendChild(objDiv ); <br>var objDrag=document.getElementById("drag"); <br>varragX=0; .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>dragX=event.clientX; <br>} <br>} ; <br>objDrag .attachEvent("onmousemove",Drag); <br>function Drag(){ <br>if(drag){ <br>var oldwin=objDrag.parentNode= oldwin.offsetLeft イベント。clientX-dragX; <br>oldwin.style.top=oldwin.offsetTop イベント.clientY-dragY; =event.clientY- 10; <br>dragY=event.clientY; <br>objDrag.attachEvent("onmouseup",stopDrag); >関数 stopDrag() { <br>objDrag.style.background="#0033FF"; <br>drag=false>} <br>関数 htmlEditor (){ <br>var frm=document.getElementById("ifrm"); <br>var objDiv=document.getElementById("div1"); <br>var mDiv=document.getElementById("mDiv"); >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 =' <td>名前 </td>'; ;td> < input type="text" value="" /> <br>iframeTextContent =' <tr>'; <BR>iframeTextContent = ' <td>メール </td>'; <br>iframeTextContent =' <td> <input type="text" value="" /> <br>iframeTextContent = ' </tr>'; <BR>iframeTextContent =' <tr>'; <BR>iframeTextContent =' <input type="button" id="btGo" value= "Go" /> ; <BR>iframeTextContent =' </tr>'; <BR>iframeTextContent =' </body> '; <br> iframeTextContent =' </html>'; <BR>frm.contentWindow.document.open(); document.write(iframeTextContent ); <BR>frm.contentWindow.document.close(); <BR>objDiv.style.display = ""; // フローティング div を表示します <BR>var objGo=frm.contentWindow.document.getElementById ("btGo" ); <BR>objGo.attachEvent("onclick",function (){ <BR>HideIframe(mDiv,objDiv); <BR>}); <BR><BR>function HideIframe( mDiv,objDiv) { <BR>mDiv.style.display='none'; <BR>objDiv.style.display = "none"; // フローティング div を非表示にします <BR></script> 🎜>< /head>
;input type= "button"id="tt"name="tt"value="Click"onClick="htmlEditor()"/>
>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。