兼容弹层代码

写一个弹层很容易,写一个兼容ie6的谈层不易。

以下是兼容ie6的谈层代码。

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>测试弹层</title>
<link rel="stylesheet" href="http://k.thea.cn/templates/front/css/base.css" />
<style type="text/css">
#mask{position:fixed;z-index:1000;top
:0;left:0;100%;height:100%;background-color:#000;filter:alpha(opacity=80);opacity:0.8;}
#layer{position:fixed;z-index:1001;top:50%;left:50%;402px;background-color:#fff;}
#layer .layer_in{padding:0 20px 20px;}
#layer h4{height:49px;line-height:49px;border-bottom:1px solid #d0d6d9;}
#layer h4 a{float:left;displaty:inline-block;height:49px;padding:0 20px;color:#333;font-size:14px;}
#layer h4 a.cur{color:#cc0000;border-bottom:1px solid #cc0000;}
#layer h4 a:hover{text-decoration:none;}
#layer .con{padding:40px 20px 0;}
#layer .con span{display:block;322px;height:284px;background:url('temp1.png') no-repeat;}
#layer .close{float:right;21px;height:23px;margin-top:14px;background:url('temp2.png') no-repeat;}
</style>
</head>

<body style="height:3000px;">
    <div id="btn" style="margin:50px;100px;height:50px;line-height:50px;background-color:yellow;">点击我把...</div>
    <!--<div id="mask"></div>
    <div id="layer">
        <div class="layer_in">
            <h4><a class="cur" href="javascript:void(0);" class="btn_login">登录</a><a href="javascript:void(0);" class="btn_reg">注册</a><em class="close"></em></h4>
            <div class="con"><span></span></div>
        </div>
    </div>-->
</body>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        //创建msk
        addPop(true);
    })
})
//判断 IE
    var isIE = function () {
        return !-[1,];
    }();
    
    //判断 IE6
    var isIE6 = function () {
        var ua = navigator.userAgent.toLowerCase();
        return isIE && /msie 6/.test(ua);
    }();
    //添加 iframe
    var appendIframe = function (elem) {
        elem.innerHTML = '<iframe style="position:absolute;left:0;top:0;100%;height:100%;z-index:-1;border:0 none;filter:alpha(opacity=0)"></iframe>';
    };
var addPop=function(hasMask){
    if(hasMask){
        var mask=document.createElement("div");
        mask.id="mask";
        var style=mask.style;
        //mask.style.cssText=""+gW+"px;height:"+gH+"px;";
        if (isIE6) {
            document.documentElement.style.backgroundImage = 'url(about:blank)';
            document.documentElement.style.backgroundAttachment = 'fixed';
        }
        document.body.appendChild(mask);
        if (isIE6) {
            document.body.style.height = '100%';
            style.position = 'absolute';
            style.setExpression('top', 'IE=document.documentElement.scrollTop+"px"');
            appendIframe(mask);
        }
    }
    var layer=document.createElement("div");
            layer.id="layer";
            layer.innerHTML=['<div class="layer_in">',
                '<h4><a class="cur" href="javascript:void(0);" class="btn_login">登录</a><a ',
                'href="javascript:void(0);" class="btn_reg">注册</a><em class="close"></em></h4>',
                '<div class="con"><span></span></div></div>'].join("");
            document.body.appendChild(layer);
            setFixed(layer);
            $(".close").click(function(){
                document.body.removeChild(mask);
                document.body.removeChild(layer);
            })
}
//设置居中
    var setFixed = function (obj) {
        var style = obj.style,
            width = obj.offsetWidth,
            height =obj.offsetHeight;
        style.position = isIE6 ? 'absolute' : 'fixed';
        
        if(isIE6){
            style.setExpression('top','IE6=document.documentElement.scrollTop+document.documentElement.clientHeight/2+"px"');
        } else {
            style.top = '50%';
        }
        
        style.left = '50%';
        style.marginLeft = -parseInt(width / 2) + 'px';
        style.marginTop = -parseInt(height / 2) + 'px';
    };
</script>
</html>
人生短短几十年,要在有限的生命里多做店有意义的事情。莫要让自己迎合别人的眼光活着。随心而为,听从心的声音。讨好自己,悠哉悠哉!
原文地址:https://www.cnblogs.com/jiaojiaome/p/4272628.html