<!doctype html>
<html lang="en">
<head>
<title>遮罩层效果 兼容ie firefox jQuery遮罩层</title>
<meta name="keywords" content="你好好 " />
<meta name="description" content="好好好好好好好好"/>
<style type="text/css">
.mask{ display:none; position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);height:1000px;}
.tanchu{ width:600px;height:300px;position:absolute; z-index:101; background:green;display:none;}
.close{ color:#fff; cursor:pointer;}
</style>
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<!–[if ie]>
<script src="http://jt.875.cn/js/html5.js" type="text/javascript"></script>
<![endif]–>
<script type="text/javascript">
$(function(){
$(".input").click(function(){
var top=($(window).height()-$(".tanchu").height())/2;
var left=($(window).width()-$(".tanchu").width())/2;
var scrollTop=$(document).scrollTop();
var scrollLeft=$(document).scrollLeft();
//alert(scrollLeft)
$(".mask").css({ display: "block", height: $(document).height() });//获取高度,兼容IE6。如果不考虑IE6直接可以换成show()
$(".tanchu").css({position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft}).show()
});
$(".close").click(function(){
$(".tanchu").hide()
$(".mask").hide()
});
});
</script>
</head>
<body>
<div class="mask"></div>
<p style="padding-top:2000px"><input class="input" type="button" style="width:100px; height:30px;" /></p>
<div class="tanchu">
<a class="close">点我关闭层</a>
<p>我是一个弹出层我是一个弹出层我是一个弹出层我是一个弹出层啊 我是一个弹出层</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>遮罩层效果 兼容ie firefox jQuery遮罩层</title>
<meta name="keywords" content="你好好 " />
<meta name="description" content="好好好好好好好好"/>
<style type="text/css">
.mask{ display:none; position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:100;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);height:1000px;}
.tanchu{ width:600px;height:300px;position:absolute; z-index:101; background:green;display:none;}
.close{ color:#fff; cursor:pointer;}
</style>
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<!–[if ie]>
<script src="http://jt.875.cn/js/html5.js" type="text/javascript"></script>
<![endif]–>
<script type="text/javascript">
$(function(){
$(".input").click(function(){
var top=($(window).height()-$(".tanchu").height())/2;
var left=($(window).width()-$(".tanchu").width())/2;
var scrollTop=$(document).scrollTop();
var scrollLeft=$(document).scrollLeft();
//alert(scrollLeft)
$(".mask").css({ display: "block", height: $(document).height() });//获取高度,兼容IE6。如果不考虑IE6直接可以换成show()
$(".tanchu").css({position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft}).show()
});
$(".close").click(function(){
$(".tanchu").hide()
$(".mask").hide()
});
});
</script>
</head>
<body>
<div class="mask"></div>
<p style="padding-top:2000px"><input class="input" type="button" style="width:100px; height:30px;" /></p>
<div class="tanchu">
<a class="close">点我关闭层</a>
<p>我是一个弹出层我是一个弹出层我是一个弹出层我是一个弹出层啊 我是一个弹出层</p>
</div>
</body>
</html>