<!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=utf-8" />
<title>jquery手写弹出层背景半透明，内容不透明</title>
<script src="jquery.min.js"></script>
<style>
*{ margin:0; padding:0;}
.alertDiv,.alertDiv1{ position:fixed; width:100%; height:100%; top:0; color:#fff;}
.alertCon,.alertCon1{ position:absolute; width:100%; height:100%; text-align:center; margin-top:20%; z-index:999;}
.alertBg,.alertBg1{ position:absolute; width:100%; height:100%; background:#000; opacity:0.7; z-index:99;}
.alertClose,.alertClose1{ position:absolute; width:100%; text-align:right; z-index:9999; color:#f00;}
</style>
</head>
<body> www.jb200.com
<div class="box">
<a href="#" class="clickAlert">点击这里弹出Div</a>
<div class="alertDiv">
<div class="alertCon">
<p><img src="logo/w3cfuns_logo_hd.png" /></p>
<p>/*By Lean*/</p>
<p>这里的内容是不透明的</p>
</div>
<div class="alertBg"></div>
<div class="alertClose">X关闭X</div>
</div>
</div>
<div class="box">
<a href="#" class="clickAlert1">点击这里弹出另外一个Div</a>
<div class="alertDiv1">
<div class="alertCon1">
<p>/*By Lean*/</p>
<p>这里的内容是不透明的，这里的内容是另一个div的</p>
</div>
<div class="alertBg1"></div>
<div class="alertClose1">X关闭X</div>
</div>
</div>
<script>
$(function(){
/*By Lean*/
alertContent(".clickAlert",".alertDiv",".alertClose");
alertContent(".clickAlert1",".alertDiv1",".alertClose1");
function alertContent(LeanA,LeanB,LeanC){
$(LeanB).hide();
$(LeanA).click(function(){
$(LeanB).fadeIn(200);
})
$(LeanC).click(function(){
$(LeanB).fadeOut(200);
})
}
})
</script>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
<p>Body内容</p>
</body>
</html>
