互換弾層コード

14396 ワード

弾層を書くのは簡単で、ie 6と互換性のある談層を書くのは容易ではありません.
以下はie 6対応のトークレイヤコードです.
 
<!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;width:100%;height:100%;background-color:#000;filter:alpha(opacity=80);opacity:0.8;}

#layer{position:fixed;z-index:1001;top:50%;left:50%;width: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;width:322px;height:284px;background:url('temp1.png') no-repeat;}

#layer .close{float:right;width:21px;height:23px;margin-top:14px;background:url('temp2.png') no-repeat;}

</style>

</head>



<body style="height:3000px;">

    <div id="btn" style="margin:50px;width: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;width: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="width:"+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>