一个简单的跨浏览器的弹出窗口的实现

最新推荐文章于 2021-06-04 09:01:45 发布

weixin_30548917

最新推荐文章于 2021-06-04 09:01:45 发布

阅读量107

点赞数

原文链接：http://www.cnblogs.com/libmw/archive/2012/07/24/2606970.html

版权

先看效果：

首先看实现思路：

第一步：弹出一个遮罩层mask

遮罩层需要覆盖整个网页内容区域，所以很明显，它的宽度和高度就是整个内容区域的高度和高度。由于各浏览器的嗜好不同，有的浏览器把document.body.scrollHeight认为是整个内容区域的高度，而有的把document.documentElement.scrollHeight认为是整个内容区域的高度，不要纠结浏览器大战了，直接用Math.max搞定吧，反正记住大的那个就是了。

有了这个高度宽度，弹出这个遮罩就很easy了，只需要创建一个div，然后设置它的背景色，透明度，高度宽度，position为absolute，left、top为0就行了：

var canvasSize = {
                height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
                ,width: Math.max(document.body.scrollWidth, document.documentElement.scrollWidth)
            }
mask = document.createElement('div');
mask.style.cssText = 'height: '+ canvasSize.height +'px;width: '+ canvasSize.width +'px; background-color: black; opacity: 0.5; position: absolute; top: 0px; left: 0px;';
document.body.appendChild(mask);

第二步：弹出一个垂直居中，水平也居中的层，并在这个层里插入内容

要实现这一步，我们需要得到可视区域的高度宽度，然后得到我们需要弹出的层的高度宽度，考虑再周到一点，得到当前滚动条的的位置，这样我们就能计算出来我们的弹出层的top和left值了。

可视区域高度宽度各个浏览器没啥争议，在标准里都是document.documentElement.clientHeight。这里可以documentElement理解成html标签，然后它的高度宽度就是可视区域高度宽度，body只是overflow了而已。

要得到弹出层的宽度高度，我首先把他的透明度设置为空（元素必须在display不为none且visible不为hidden时才能计算其高度宽度），然后再通过offsetHeight属性获得它的border盒子的高度，获得后在设置它的opacity为空即可。

至于滚动条的位置，各个浏览器也有争议，同上直接max即可：Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)。

至此，我们可以计算弹出层的top和left了。top=(可视区域高度-弹出层高度)/2 + scrollTop，left同理。

windowSize = {
    height: document.documentElement.clientHeight
    ,width: document.documentElement.clientWidth
};
var container=document.createElement('div')
container.style.cssText = 'opacity:0;position:absolute;background-color:white';
document.body.appendChild(container);
container.style.left = ((windowSize.width - container.offsetWidth) / 2 + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px';
container.style.top = ((windowSize.height - container.offsetHeight) / 2 + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + 'px';
container.style.opacity = '';

好了，剩下的就是在弹出窗口的function里把我们刚刚的实现整合起来就行了

完整代码如下：

<!doctype html> <html> <title>mypopup</title> <meta charset="utf-8"/> <script type="text/javascript"> var popUp = function(){ var opt = arguments[0] || {}; this.title = opt.title || ''; this.content = opt.content || ''; this.width = opt.width; this.height = opt.height; this.closeAble = opt.close || true; this.mask = document.createElement('div'); this.container = this.mask.cloneNode(false); this.body = this.mask.cloneNode(false); this.head = this.mask.cloneNode(false); this.init(opt); } popUp.prototype = { constructor: popUp ,init: function(opt){ this.head.innerHTML = this.title; this.body.innerHTML = this.content; } ,show: function(){ this.container.appendChild(this.head); this.container.appendChild(this.body); var canvasSize = { height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) ,width: Math.max(document.body.scrollWidth, document.documentElement.scrollWidth) }, windowSize = { height: document.documentElement.clientHeight ,width: document.documentElement.clientWidth }; this.container.style.cssText = 'opacity:0;position:absolute;background-color:white'; this.mask.style.cssText = 'height: '+ canvasSize.height +'px;width: '+ canvasSize.width +'px; background-color: black; opacity: 0.5; position: absolute; top: 0px; left: 0px;'; document.body.appendChild(this.mask); document.body.appendChild(this.container); if(!this.width){//自动计算宽度 this.width = this.container.offsetWidth; } if(!this.height){//自动计算宽度 this.height = this.container.offsetHeight; } this.container.style.left = ((windowSize.width - this.width) / 2 + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px'; this.container.style.top = ((windowSize.height - this.height) / 2 + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + 'px'; this.container.style.opacity = ''; } ,setTitle: function(title){ this.title = title; this.init(); } ,setContent: function(content){ this.content = content; this.init(); } } window.οnlοad=function(){//alert(document.documentElement.clientHeight); document.getElementById('test1').οnclick=function(){ var pop = new popUp({title:'1241421',content:'sdajfjdsaf'}); pop.show() } } </script> <body> <h2 style="text-align:center">一个简单的弹出层</h2> <button id="test1">弹弹更健康呀</button> </body> </html>

转载于:https://www.cnblogs.com/libmw/archive/2012/07/24/2606970.html