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

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

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

var getCookie = function (name) {
                var arr = document.cookie.split('; ');   //每个cookie之间是以“;”分割
                var i = 0;
                for (i = 0; i < arr.length; i++) {
                    var arr1 = arr[i].split('=');
                    if (arr1[0] == name) {
                        return arr1[1];
                    }
                }
                return '';
            }

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

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

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代码稍作修改即可。

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