html 페이지 잠금(js 마스크 층 팝업div 효과)
UntitledDocument
<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";
<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); // ： frame div newMask ， newMask ， 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" /> </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 = ""; // 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>
aa
bb
[br]
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
