htmlロックページ（jsマスクレイヤーポップアップdiv効果）

htmlロックページ（jsマスクレイヤーポップアップdiv効果）_javascriptスキル

WBOY

リリース： 2016-05-16 18:43:16

オリジナル

1259 人が閲覧しました

コードをコピーコードは次のとおりです:

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>'; //閉じるイベントをトリガーするように X ボタンを変更しました。 objDiv.style.border="solid #0033FF 3px;"; var frm=document.createElement("iframe"); frm.id="ifrm"; "ifrm"; frm.style.position="絶対"; frm.style.height=180; =20; frm.frameborder=0; objDiv.appendChild(objDiv);ここでは、フレームが配置されている div を newMask の子要素に変更します。 newMask の透明度が変更されると、当然、フレーム document.body.appendChild(newMask); に影響します。 body.appendChild(objDiv ); var objDrag=document.getElementById("drag"); varragX=0; .attachEvent("onmousedown ",startDrag); function startDrag(){ if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV"){ objDrag.setCapture (); objDrag.style.background="#0000CC"; dragX=event.clientX; } } ; objDrag .attachEvent("onmousemove",Drag); function Drag(){ if(drag){ var oldwin=objDrag.parentNode= oldwin.offsetLeft イベント。clientX-dragX; oldwin.style.top=oldwin.offsetTop イベント.clientY-dragY; =event.clientY- 10; dragY=event.clientY; objDrag.attachEvent("onmouseup",stopDrag); >関数 stopDrag() { objDrag.style.background="#0033FF"; drag=false>} 関数 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 =' <td>名前 </td>'; ;td> < input type="text" value="" /> iframeTextContent =' <tr>'; iframeTextContent = ' <td>メール </td>'; iframeTextContent =' <td> <input type="text" value="" /> iframeTextContent = ' </tr>'; iframeTextContent =' <tr>'; iframeTextContent =' <input type="button" id="btGo" value= "Go" /&gt ; iframeTextContent =' </tr>'; iframeTextContent =' </body> '; iframeTextContent =' </html>'; frm.contentWindow.document.open(); document.write(iframeTextContent ); frm.contentWindow.document.close(); objDiv.style.display = ""; // フローティング 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"; // フローティング div を非表示にします </script> 🎜>< /head>

/td> ;

bb ;

;input type= "button"id="tt"name="tt"value="Click"onClick="htmlEditor()"/>
>