js弹窗div打开html,html 锁定页面(js遮罩层弹出div效果)

UntitledDocument

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='

//更改了X按钮为触发关闭事件。

objDiv.style.border="solid #0033FF 3px;";

var frm=document.createElement("iframe");

frm.id="ifrm";

frm.name="ifrm";

frm.style.position="absolute";

frm.style.width="100%";

frm.style.height=180;

frm.style.top=20;

frm.style.display='';

frm.frameborder=0;

objDiv.appendChild(frm);

// newMask.appendChild(objDiv); //问题出在这里：你把frame所在的div变成了 newMask的子元素，当newMask透明度更改时，当然会影响到frame

document.body.appendChild(newMask);

document.body.appendChild(objDiv);

var objDrag=document.getElementById("drag");

var drag=false;

var dragX=0;

var dragY=0;

objDrag.attachEvent("onmousedown",startDrag);

function startDrag(){

if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV"){

objDrag.setCapture();

objDrag.style.background="#0000CC";

drag=true;

dragX=event.clientX;

dragY=event.clientY;

}

};

objDrag.attachEvent("onmousemove",Drag);

function Drag(){

if(drag){

var oldwin=objDrag.parentNode;

oldwin.style.left=oldwin.offsetLeft+event.clientX-dragX;

oldwin.style.top=oldwin.offsetTop+event.clientY-dragY;

oldwin.style.left=event.clientX-100;

oldwin.style.top=event.clientY-10;

dragX=event.clientX;

dragY=event.clientY;

}

};

objDrag.attachEvent("onmouseup",stopDrag);

function stopDrag(){

objDrag.style.background="#0033FF";

objDrag.releaseCapture();

drag=false;

};

}

function htmlEditor(){

var frm=document.getElementById("ifrm");

var objDiv=document.getElementById("div1");

var mDiv=document.getElementById("mDiv");

mDiv.style.display='';

var iframeTextContent='';

iframeTextContent+=' ';

iframeTextContent+=' ';

iframeTextContent+='

';

iframeTextContent+=' ';

iframeTextContent+=' ';

iframeTextContent+='

';

iframeTextContent+='

iframeTextContent+='

';

iframeTextContent+='

Name ';

iframeTextContent+='

';

iframeTextContent+='

';

iframeTextContent+='

';

iframeTextContent+='

Email ';

iframeTextContent+='

';

iframeTextContent+='

';

iframeTextContent+='

';

iframeTextContent+='

';

iframeTextContent+='

';

iframeTextContent+='

';

iframeTextContent+=' ';

iframeTextContent+=' ';

frm.contentWindow.document.designMode='off';

frm.contentWindow.document.open();

frm.contentWindow.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

}

aa
bb

[br]