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里面的方法即可
分享到:
相关推荐
jquery弹出层插件,20种弹出层,特效杠杠滴
jQuery zoom图片弹出层插件简单的图片相册弹出层窗口 jQuery zoom图片弹出层插件简单的图片相册弹出层窗口 jQuery zoom图片弹出层插件简单的图片相册弹出层窗口
使用方便,样式自由的一款弹出层插件,适用移动和网页。
JQuery弹出层插件,Popup div 实例,前段弹窗插件
一款很好用的jquery弹出层插件,附带教程
信息提示弹出层插件是一款漂亮实用的信息提示弹出层插件,多种提示功能,小巧好用,带遮罩效果。
sexylightbox插件是lightbox繁衍而来,但它比lightbox更性感、更轻。演示地址:http://www.jq22.com/jquery-info535
jQuery弹出层插件大全_爱上DIV + CSS_.doc
zeroModal-扁平化风格jQuery弹出层插件
jQuery弹出层插件PopupDiv-v1.0下载
有弹出层源码,有deom,是开源的插件,支持在线更新。个人已经试用,感觉很不错,轻量级的插件,易扩展和维护。
NULL 博文链接:https://hngmduyi.iteye.com/blog/1660075
jquery 弹出层插件下载(简单、易用)
基于jQuery弹出层插件thickbox 智能提示
jquery colorbox弹出层插件制作图片弹出显示代码
不错的通用的iframe弹出层插件代码想用就有用
jQuery弹出层插件Sexy LightBox是一款漂亮动感的lightbox弹出层插件sexy lightbox 2.3。
jQuery弹出层插件三种简单遮罩弹出框效果
超级漂亮的Jquery弹出层插件,可支持以下功能 1、触发响应事件 2、设置弹出层的标题 3、设置弹出层类型(text、容器ID、URL、Iframe) 4、弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址) 5、...