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>

回复

我来回复
  • 暂无回复内容