<!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>
<title>jquery弹窗遮罩</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
body
{
background: #ffffff;
padding: 0px;
margin: 0px;
}
body, th, td, input, button, textarea
{
font-family: "宋体";
font-size: 12px;
}
.over_main
{
background: white;
position: absolute;
width: 600px;
height: 400px;
border: 1px solid lightblue;
margin: 10px;
overflow: auto;
}
.over_main p
{
margin: 0px;
padding: 3px;
background: #BCDAF0;
}
.over_products
{
padding-top: 5px;
padding-left: 10px;
}
.over_searchResults li
{
list-style: none;
}
.over_close
{
float: right;
margin-top: -18px;
padding-right: 5px;
cursor: pointer;
}
.over_cover
{
background: gray;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.75;
}
</style>
</head>
<body>
<input type="button" value="弹窗遮罩" id="test" />
<div class="over_main">
<p>
选择商品</p>
<span class="over_close">关闭</span>
<div class="over_products">
按
<select id="selectItem">
<option>商品名称</option>
<option>商品Id</option>
<option>SiebelId</option>
<option>淘宝商家编码</option>
<option>淘宝商家Sku编码</option>
</select>
<input type="text" id="TxtSearchKeyWord" style="width: 200px;" />
<input type="button" id="btnSearChchooseProducts" value="查询"></input>
<div class="over_searchResults">
<ul>
<li>没找到符合条件的任何记录！</li></ul>
</div>
</div>
</div>
<div class="over_cover">
</div>
<script type="text/javascript">
$(function () {
$("#test").click(function () {
adjust();
});
$(".over_cover").click(function () {
showMask(false);
});
$(".over_close").click(function () {
showMask(false);
});
});
function showMask(isShow) {
var winW = $(window).width();
var winH = $(window).height();
$(".over_cover").css("width", winW + "px");
$(".over_cover").css("height", winH + "px");
$(".over_cover").css("background", "gray");
if (isShow) {
$(".over_main").show();
$(".over_cover").show();
} else {
$(".over_main").hide();
$(".over_cover").hide();
}
}
function adjust() {
//取得当前宽度和高度
var w = $(".over_main").css("width").replace(/px/g, "");
var h = $(".over_main").css("height").replace(/px/g, "");
//定位这个盒子，相对于窗口垂直居中
var winW = $(window).width();
var winH = $(window).height();
var top = (winH / 2) - (h / 2);
top = top < 0 ? 0 : top;
var left = (winW / 2) - (w / 2);
left = left < 0 ? 0 : left;
//遮罩层
showMask(true);
$(".over_main").css("top", top + "px");
$(".over_main").css("left", left + "px");
$(".over_main").css("z-index", "1");
}
</script>
</body>
</html>
效果图：
