<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<?php教程
/*超简洁完美遮罩弹出层,无视分辨率,页面高度任意,弹出层高度任意
* 唯一需要注意的是如果css教程写的不标准.那么页面body的实际高度就不一定要是页面真实高度.位置高度就无法计算准确.
*/
?>
<script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style><!--*{ margin:0; padding:0; font-size:13px;}.d{height:100%;left:0;position:absolute;top:0;width:100%;background:#aaa;opacity:0.2;filter:alpha(opacity=20)}#b{ z-index:200; }--></style>
<body>
<br /><br /><br /><br /><br /><br /><br />
<a id="a" href="javascript:viod(0)">弹出</a>
<div class="d" style="z-index: 100; display:none"></div>
<div id="b" style="width:650px; height:650px; background:#ccc; display:none">这是弹出层<a id="c" href="javascript:viod(0)">关闭</a></div>
</body>
<script>
$(document).ready(function(){
// .d是遮罩层层
// #b是弹出层
$("#a").bind("click",function(){
//这里是body_height
if($('body').height() < $(window).height()){
var body_height = $(window).height();
}else{
var body_height = $(document).height();
}
var left = $(window).width();
var layer_height = $('#b').height();
var layer_width = $('#b').width();
$("#b").css("position","absolute");
$("#b").css("top",(body_height-$(window).height()+($(window).height()-layer_height)/2));
$("#b").css("left",(left-layer_width)/2);
$(".d").css("height",$(document).height());
$("#b").fadein('fast');
$(".d").show();
});
$("#c").bind("click",function(){
$("#b").hide();
$(".d").hide();
});
});
</script>
源码下载
http://down.111cn.net/down/code/jquery/2010/1009/21116.html