欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自己写的一个弹出层插件

程序员文章站 2022-04-05 10:19:13
...

1.插件js
var itemId="";
var showDivId="";
//控制层居中显示
function center(id){
var o = document.getElementById(id);
o.style.display = 'block';
var s = {
position:'absolute',
top:'50%',
left:'50%',
margin:o.offsetHeight/-2+(document.body.scrollTop||document.documentElement.scrollTop)+'px '
+(o.offsetWidth/-2+(document.body.scrollLeft||document.documentElement.scrollLeft))+'px'
}
for(var p in s){
o.style[p] =s[p]
}

}

//显示层
var iframe = document.createElement('iframe');
iframe.style.cssText = 'position:absolute;display:none;z-index:99;';
iframe.frameBorder = 0;
document.body.appendChild(iframe);

function showDIV(id){
center(id);
var o = document.getElementById(id);
iframe.width = o.offsetWidth;
iframe.height = o.offsetHeight;
o.style.visibility = 'visible';
o.style.zIndex = 100;
iframe.style.top = o.offsetTop+'px';
iframe.style.left = o.offsetLeft + 'px';
iframe.style.display = 'block'
showDivId=id;
var laydiv = document.getElementById('laydiv');
with(laydiv.style){
width = document.documentElement.scrollWidth + 'px';
height = document.documentElement.scrollHeight+'px';
display = 'block';
}
}

//隐藏层
function hiddenDIV(id,pageId){
var o = document.getElementById(id);
iframe.style.display = 'none'
o?o.style.visibility = 'hidden':'';
document.getElementById('laydiv').style.display = 'none';
document.getElementById(pageId).value="";
document.getElementById(pageId).innerHTML="";
}
2.在页面上设置一个<div>
3.页面上加一个样式
<div id="laydiv" style="position:absolute;display:none;filter:alpha(opacity=50);opacity:0.5;background:#999;top:0;left:0;">
<!--[if IE 6]> <iframe frameBorder = 0 width=100% height=100% style="filter:alpha(opacity=0);opacity:0"></iframe><![endif]-->
</div>
4.调用js里面的方法即可

相关标签: IE