JavaScript实现弹层兼容所有浏览器

最新推荐文章于 2022-04-17 09:06:37 发布

ClassicSong

最新推荐文章于 2022-04-17 09:06:37 发布

阅读量2k

点赞数

分类专栏：插件类文章标签： javascript 代码面向对象浏览器弹层

本文链接：https://blog.csdn.net/ernijie/article/details/47338297

版权

插件类专栏收录该内容

4 篇文章 0 订阅

订阅专栏

刚刚过了一遍红宝书第6章--面向对象的程序设计。恰巧项目中有一个独立的小功能可以作为小白鼠。

在项目中的首页需要一个温馨提示弹层，并且这个弹层是在浏览器第一次打开此首页时才会显示弹层，如果对页面进行刷新操作，弹层不会再出现；除非关闭浏览器再打开，弹层才会继续出现。这个弹层出不出现？在什么时候出现？这个是通过在加载页面时记一个不设过期时间（浏览器关闭，cookie自动消失）的cookie，通过判断cookie来确定是否弹层。附一段简单的代码；

弹层显示就说到这里，重点是要说一下弹层的实现，还要兼容所有浏览器。

先附上代码，再一一进行说明。

html代码：

<div class="pop_cont" id="getPrizeSuccess">
        <img src="images/success.png" width="131" height="143"/>
        <h3 class="tip">恭喜您！<br/>特权奖励领取成功！</h3>    
    </div>

css代码：

.pop { position:fixed; left:50%; top:50%; _position:absolute; z-index:1001; background:#993333;  }
.pop .close{ display:block; width:49px; height:49px; position:absolute;top:0; right:-69px; text-decoration:none; text-indent:-9999px; background:url(../images/close.png) no-repeat left top;  }
.pop .pop_cont{ line-height:260px; text-align:center; color:#ffffcc; }
.pop .pop_cont img,.pop .pop_cont h3.tip{ display:inline-block;*display:inline; *zoom:1;  vertical-align:middle; _margin-top:60px;}
.pop .pop_cont h3.tip{  width:330px; line-height:42px;  font-size:30px; font-weight:bold; text-align:left; margin-left:22px; }
.mask { position:fixed; left:0; top:0;  width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50);  z-index:1000;  _position:absolute; _width:expression(documentElement.scrollLeft+documentElement.clientWidth); _height:expression(documentElement.scrollTop+documentElement.clientHeight);}

js代码：

function Pop(obj) {
    this.width = "570px";
    this.height = "260px";
}

Pop.prototype.alertBox = function (obj, option) {

    if (typeof option == "string") {
        if (option == "open") {
            obj[0].parentNode.parentNode.style.display = "block";
        } else if (option == "close") {
            obj[0].parentNode.parentNode.style.display = "none";
        } else {
            return false;
        }
    } else {
        var widths = 0;
        var heights = 0;
        var wrap = document.createElement("div");
        var pop = document.createElement("div");
        var close = document.createElement("a");
        var mask = document.createElement("div");

        wrap.className = "pop_wrap";
        pop.className = "pop";
        close.className = "close";
        mask.className = "mask";

        if (option.width) {
            widths = parseInt(option.width);
        } else {
            widths = parseInt(this.width);
        }
        if (option.height) {
            heights = parseInt(option.height);
        } else {
            heights = parseInt(this.height);
        }
        pop.style.width = widths+"px";
        pop.style.height = heights+"px";

        pop.style.marginLeft = -widths / 2 + "px";
        pop.style.marginTop = - heights / 2 + "px";

        pop.appendChild(close);
        pop.appendChild(obj[0]);
        wrap.appendChild(pop);
        wrap.appendChild(mask);

        wrap.style.display = "none";
        var body = document.getElementsByTagName("body");
        body[0].appendChild(wrap);

        close.onclick = function () {
            wrap.style.display = "none";
            if (option.closeFn) {
                option.closeFn();
            }
        } 
    }
}

原型图：（粗略的画了下，简陋了些，能看明白就ok）

弹层分为两个区域，公共区域和自定义区域。

如上图所示红色手绘线穿过的区域就是公共区域，主要包括遮罩和关闭按钮。而矩形红框中的即为自定义区域，根据弹层的功能显示不同的元素。

接下来详细说下代码实现。

html代码说明：

模仿jQueryUI里的插件弹层方式，把自定义的html代码直接写到html文件中，自我感觉这样处理比较灵活，弹层里要展示的东西都在html文件里操作就可以了(当然这里只针对一般情况，特殊情况另对待)。也即是将本文上边附的html代码直接放到html文件的最下端即可。至于公共区域的html代码是在js代码里生成，下边再说明。

css代码说明：

css里需要注意的地方有两个：第一：弹层遮罩要遮住整个页面，在滚动纵向滚动条时依然可以遮住；第二：弹层居中显示，滚动条滚动时依然居中。

遮罩的css：

<pre name="code" class="css">.mask { position:fixed; left:0; top:0;  width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50);  z-index:1000;  _position:absolute; _width:expression(documentElement.scrollLeft+documentElement.clientWidth); _height:expression(documentElement.scrollTop+documentElement.clientHeight);}

position:fixed; left:0; top:0; width:100%; height:100%; 这部分样式控制遮罩铺满整个屏幕；

background:#000; opacity:0.5; filter:alpha(opacity=50); 这部分样式控制遮罩的半透明黑色。

z-index:1000; 控制遮罩的层级，一定要比弹层低一级。

_position:absolute; _width:expression(documentElement.scrollLeft+documentElement.clientWidth); _height:expression(documentElement.scrollTop+documentElement.clientHeight); 由于ie6不识别position的fixed，所以这里需要专门为ie6写。宽度和高度也是同样的道理。

弹层的css:

.pop { position:fixed; left:50%; top:50%; _position:absolute; _top:expression(documentElement.scrollTop+documentElement.clientHeight/2); _left:expression(documentElement.scrollLeft+documentElement.clientWidth/2); z-index:1001; background:#993333;  }

position:fixed; left:50%; top:50%; 这个是弹层的位置，为什么没有宽度高度呢，是因为将弹层的宽高做成了可配置的了。下边会继续说。

_position:absolute; _top:expression(documentElement.scrollTop+documentElement.clientHeight/2); _left:expression(documentElement.scrollLeft+documentElement.clientWidth/2); 这个也是弹层的位置，只是为ie6专门写的。

弹层自定义部分css: 这部分的css要看自己项目的需求了，不做赘述。

js代码说明:

代码结构用的是js的原型模式，具体的可以参考下红皮书。

function Pop(obj) {
this.width = "570px";
this.height = "260px";
}

这段代码是构造函数，将默认的弹层宽高写到这里，当调用弹层函数时，参数中如果没有传递宽高，就从这里拿宽高作为默认值。具体的数值要根据需求来下。

if (typeof option == "string") {
        if (option == "open") {
            obj[0].parentNode.parentNode.style.display = "block";
        } else if (option == "close") {
            obj[0].parentNode.parentNode.style.display = "none";
        } else {
            return false;
        }
    }else{

//弹层初始化

}

这段代码是根据实例对象传进来的参数来判断是执行弹层打开、关闭、初始化。

初始化代码说明：

var wrap = document.createElement("div");
var pop = document.createElement("div");
var close = document.createElement("a");
var mask = document.createElement("div");

wrap.className = "pop_wrap";
pop.className = "pop";
close.className = "close";
mask.className = "mask";

pop.appendChild(close);

pop.appendChild(obj[0]);
wrap.appendChild(pop);
wrap.appendChild(mask);

wrap.style.display = "none";
var body = document.getElementsByTagName("body");
body[0].appendChild(wrap);

这段代码实现的是弹层的公共部分。

if (option.width) {
            widths = parseInt(option.width);
        } else {
            widths = parseInt(this.width);
        }
        if (option.height) {
            heights = parseInt(option.height);
        } else {
            heights = parseInt(this.height);
        }
        pop.style.width = widths+"px";
        pop.style.height = heights+"px";

这段代码实现的是弹层宽高度自定义。

pop.style.marginLeft = -widths / 2 + "px";
pop.style.marginTop = - heights / 2 + "px";

这段代码是实现弹层居中的一部分js代码。

close.onclick = function () {
            wrap.style.display = "none";
            if (option.closeFn) {
                option.closeFn();
            }
        }

这段代码是实现关闭按钮功能，一般是点击关闭按钮只要关闭弹层即可，如果还有其他额外的操作这里也支持自定义。如果关闭按钮的显示与否也想可配置。对js代码稍作修改即可。

弹层就说到这里，如果有好的意见欢迎讨论。

ClassicSong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现弹层兼容所有浏览器

刚刚过了一遍红宝书第6章--面向对象的程序设计。恰巧项目中有一个独立的小功能可以作为小白鼠。在项目中的首页需要一个温馨提示弹层，并且这个弹层是在浏览器第一次打开此首页时才会显示弹层，如果对页面进行刷新操作，弹层不会再出现；除非关闭浏览器再打开，弹层才会继续出现。这个弹层出不出现？在什么时候出现？这个是通过在加载页面时记一个不设过期时间（浏览器关闭，cookie自动消失）的cookie，
复制链接

扫一扫

专栏目录