[js]用javascript实现的带蒙版弹出窗口
现在越来越多的网站都用这种形式的弹出窗口进行登录操作,例如迅雷和百度。
但不仅仅是登录,有些页面的打开操作用这种弹窗也是很方便的。
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function $(elem){
return document.getElementById(elem);
}
function Win_pop(isbackDiv,srcPop){
if($('floatDiv')==null){
var floatDiv = document.createElement('div');
floatDiv.id = "floatDiv";
floatDiv.style.position = "absolute";
floatDiv.style.width = 500 + "px";
floatDiv.style.height = 400 + "px";
floatDiv.style.left =(document.documentElement.clientWidth/2 + document.documentElement.scrollLeft - 250)+"px";
floatDiv.style.top =(document.documentElement.clientHeight/2 + document.documentElement.scrollTop - 200)+"px";
floatDiv.style.zIndex = 1001;
var loginText = "<iframe id=\"iframe1\" frameborder=\"0\" scrolling=\"no\" src='" + srcPop + "' width='100%' height='200'></iframe>";
floatDiv.innerHTML = loginText;
document.body.appendChild(floatDiv);
}
else{
$('floatDiv').style.display = "block";
}
if($('backDiv')==null && isbackDiv ==true){
var backDiv = document.createElement('div');
backDiv.id = "backDiv";
backDiv.style.backgroundColor = "Black";
backDiv.style.filter = "alpha(opacity=50)";
backDiv.style.MozOpacity = "0.50";
backDiv.style.position = "absolute";
backDiv.style.left = "0px";
backDiv.style.top = "0px";
backDiv.style.width = Math.max(document.body.scrollWidth, document.documentElement.clientWidth) +"px";
backDiv.style.height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight)+"px";
document.body.appendChild(backDiv);
$('backDiv').style.zIndex = 100;
}
else if(isbackDiv ==true){
$('backDiv').style.display = "block";
}
}
function CloseFloatDiv(){ //关闭窗口
$('floatDiv').style.display = "none";
($('floatDiv')).parentNode.removeChild($('floatDiv')); //删除该div标签
if($('backDiv')){
$('backDiv').style.display = "none";
}
}
注意$('floatDiv')).parentNode.removeChild($('floatDiv')); 这一句代码,当此JS不用来当登录窗口用时,也就是在一个页面上多次使用了该js,那么这句代码就很有必要了,否则js程序会跳过创建对应页面的iframe,直接引用了第一次所创建的iframe。