jQuery弹出带有遮罩窗口效果
分类：实例代码
当前很多功能都有这样的效果，那就是点击可以弹出一个窗口。
这个窗口具有以下特点:
（1）.带有半透明的遮罩层。
（2）.窗口是居中的。
下面就分享一个能够简单实现此功能的代码实例，需要的朋友可以做一下参考。
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
html.body {
height:100%;
}
div {
margin: 0 auto;
}
.overBg {
width: 100%;
height: 100%;
background: gray;
opacity: 0.5;
filter: alpha(opacity=50);
position: fixed;
top: 0;
z-index: 300;
}
.tc-con {
width: 200px;
height: 200px;
padding: 30px;
background: blanchedalmond;
position: fixed;
top: 0;
z-index: 1000;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
var a = document.getElementById('tc-con');
a.style.left = (document.body.clientWidth / 2 - a.clientWidth / 2) + 'px';
a.style.top = (document.documentElement.clientHeight / 2 - a.clientHeight / 2) + 'px';
$('.tc').hide();
$('.btn').click(function(){
$('.tc').show();
})
$('.tc').click(function(){
$(this).hide();
})
})
</script>
</head>
<body>
<div class="btn">点击出现</div>
<div class="tc">
<div class="overBg"></div>
<div class="tc-con" id="tc-con">前端教程网</div>
</div>
</body>
</html>