自己写的一个弹出层插件
程序员文章站
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里面的方法即可
上一篇: 字符串操作
下一篇: Elasticsearch 的学习