互換弾層コード
14396 ワード
弾層を書くのは簡単で、ie 6と互換性のある談層を書くのは容易ではありません.
以下は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>