简单易用的Div弹出层

最新推荐文章于 2019-07-23 04:30:16 发布

pa5201314

最新推荐文章于 2019-07-23 04:30:16 发布

阅读量921

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/pa5201314/article/details/43951035

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var isIE=(document.all)?true:false;var isIE6=isIE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1]==6);var _$=function(a){return"string"==typeof a?document.getElementById(a):a};var Class={create:function(){return function(){this.initialize.apply(this,arguments)}}};var Extend=function(a,c){for(var b in c){a[b]=c[b]}};var Bind=function(b,a){return function(){return a.apply(b,arguments)}};var Each=function(d,b){for(var c=0,a=d.length;c<a;c++){b(d[c],c)}};var Contains=function(d,c){return d.contains?d!=c&&d.contains(c):!!(d.compareDocumentPosition(c)&16)};var OverLay=Class.create();OverLay.prototype={initialize:function(options){this.SetOptions(options);this.Lay=_$(this.options.Lay)||document.body.insertBefore(document.createElement("div"),document.body.childNodes[0]);this.Color=this.options.Color;this.Opacity=parseInt(this.options.Opacity);this.zIndex=parseInt(this.options.zIndex);with(this.Lay.style){display="none";zIndex=this.zIndex;left=top=0;position="fixed";width=height="100%"}if(isIE6){this.Lay.style.position="absolute";this._resize=Bind(this,function(){this.Lay.style.width=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth)+"px";this.Lay.style.height=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)+"px"});this.Lay.innerHTML='<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'}},SetOptions:function(a){this.options={Lay:null,Color:"#DCE2F1",Opacity:50,zIndex:1000};Extend(this.options,a||{})},Show:function(){if(isIE6){this._resize();window.attachEvent("onresize",this._resize)}with(this.Lay.style){isIE?filter="alpha(opacity:"+this.Opacity+")":opacity=this.Opacity/100;backgroundColor=this.Color;display="block"}},Close:function(){this.Lay.style.display="none";if(isIE6){window.detachEvent("onresize",this._resize)}}};var LightBox=Class.create();LightBox.prototype={initialize:function(d,c,a,b){this.Box=_$(d);this.OverLay=new OverLay(b);this.SetOptions(b);this.Fixed=!!this.options.Fixed;this.Over=!!this.options.Over;this.Center=!!this.options.Center;this.onShow=this.options.onShow;this.Box.style.zIndex=this.OverLay.zIndex+1;this.Box.style.width=c+"px";this.Box.style.height=a+"px";this.Box.style.display="none";if(isIE6){this._top=this._left=0;this._select=[];this._fixed=Bind(this,function(){this.Center?this.SetCenter():this.SetFixed()})}},SetOptions:function(a){this.options={Over:true,Fixed:true,Center:true,onShow:function(){}};Extend(this.options,a||{})},SetFixed:function(){this.Box.style.top=document.documentElement.scrollTop-this._top+this.Box.offsetTop+"px";this.Box.style.left=document.documentElement.scrollLeft-this._left+this.Box.offsetLeft+"px";this._top=document.documentElement.scrollTop;this._left=document.documentElement.scrollLeft},SetCenter:function(){this.Box.style.marginTop=document.documentElement.scrollTop-this.Box.offsetHeight/2+"px";this.Box.style.marginLeft=document.documentElement.scrollLeft-this.Box.offsetWidth/2+"px"},Show:function(a){this.Box.style.position=this.Fixed&&!isIE6?"fixed":"absolute";this.Over&&this.OverLay.Show();this.Box.style.display="block";if(this.Center){this.Box.style.top=this.Box.style.left="50%";if(this.Fixed){this.Box.style.marginTop=-(this.Box.offsetHeight+80)/2+"px";this.Box.style.marginLeft=-this.Box.offsetWidth/2+"px"}else{this.SetCenter()}}if(isIE6){if(!this.Over){this._select.length=0;Each(document.getElementsByTagName("select"),Bind(this,function(b){if(!Contains(this.Box,b)){b.style.visibility="hidden";this._select.push(b)}}))}this.Center?this.SetCenter():this.Fixed&&this.SetFixed();this.Fixed&&window.attachEvent("onscroll",this._fixed)}this.onShow()},Close:function(){this.Box.style.display="none";this.OverLay.Close();if(isIE6){window.detachEvent("onscroll",this._fixed);Each(this._select,function(a){a.style.visibility="visible"})}}};
</script>

<style type="text/css">
/* dialog */
.lightbox{background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}
.lightbox .bar{position:relative;border-bottom:1px solid #FD6596;background:#FD6596;}
.lightbox .title{height:28px;line-height:28px;font-size:14px;color:#FFF;padding-left:7px;display:inline-block;}
.lightbox .close{
position:absolute;vertical-align:top;width:22px;height:28px;line-height:28px;top:0;right:3px;display:inline-block;*display:inline;
font-weight:500;color:#FFF;font-size:22px;font-family:tahoma,arial,\5b8b\4f53,sans-serif;outline:0 none;zoom:1;cursor:pointer;
}
</style>
</head>
<body>

<button id="pop">点击</button>

<div class="lightbox" id="pop_move">
<div class="bar">
<div class="title">消息</div>
<div class="close" id="pop_close">×</div>
</div>
<div class="dialog">
这里可以自由定义
</div>
</div>

<script type="text/javascript">
var _pop = new LightBox("pop_move",500,300);
$("#pop").click(function(){
_pop.Show();
});
$("#pop_close").click(function(){
_pop.Close();
});
</script>

</body>
</html>

pa5201314

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单易用的Div弹出层

<button id="pop">点击</button><div class="lightbox" id="pop_move"><div class="bar"><div class="title">消息</div><div class="close" id="pop_close">×</div></div><div class="dialog">这里可以自由定义</div></div>
复制链接

扫一扫