html 잠금 페이지(js 마스크 레이어 팝업 div 효과)_javascript 기술
- WBOY원래의
- 2016-05-16 18:43:161218검색
코드 복사 코드는 다음과 같습니다.
<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.width="100%"; <br>frm.style.height=180>frm.style.top =20; <br>frm.frameborder=0; <br>objDiv.appendChild(frm) <br>// newMask.appendChild(objDiv); 여기: 프레임이 있는 div를 newMask의 하위 요소로 변경합니다. newMask의 투명도가 변경되면 당연히 프레임 <br>document.body.appendChild(newMask) <br>문서에 영향을 미칩니다. body.appendChild(objDiv ); <br>var objDrag=document.getElementById("drag"); <br>var drag=false; <br>var dragY=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>dragY=event.clientY; ; <br>objDrag .attachEvent("onmousemove",Drag); <br>function Drag(){ <br>if(drag){ <br>var oldwin=objDrag.parentNode <br>oldwin.style.left= oldwin.offsetLeft 이벤트.<br>oldwin.style.top=oldwin.offsetTop event.clientY-dragY; <br>oldwin.style.left=event.clientX-100>oldwin.style.top =event.clientY- 10; <br>dragY=event.clientY; <br>} <br>}; <br>objDrag.attachEvent("onmouseup",stopDrag); >function stopDrag() { <br>objDrag.style.Background="#0033FF"; <br>objDrag.releaseCapture(); <br>drag=false; <br>} <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 =' < 메타 http-equiv= "Content-Type" content="text/html; charset=gb2312" />' <br>iframeTextContent =' </head>' <br>iframeTextContent =' <body>' ; <br>iframeTextContent =' <table>'; <br>iframeTextContent =' <tr>'; <br>iframeTextContent =' <td>이름 </td>'; ;td> 입력 유형="텍스트" 값="" /> </td>' <br>iframeTextContent =' </tr>' <br>iframeTextContent; <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= "이동" /> </td>'; <br>iframeTextContent =' </tr>' <br>iframeTextContent =' </body> '; <br> iframeTextContent =' </html>'; <br>frm.contentWindow.document.designMode='off'; <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><br>function HideIframe( mDiv,objDiv) { <br>mDiv.style.display='none'; <br>objDiv.style.display = "none"; //플로팅 div 숨기기 <br>} <br></script> 🎜>< /head>
[br]
< ;입력 유형= "button"id="tt"name="tt"value="Click"onClick="htmlEditor()"/>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.