jQuery彈出帶有遮罩視窗效果

antzone發表於2017-04-10
jQuery遮罩

當前很多功能都有這樣的效果，那就是點選可以彈出一個視窗。

這個視窗具有以下特點:

（1）.帶有半透明的遮罩層。

（2）.視窗是居中的。

下面就分享一個能夠簡單實現此功能的程式碼例項，需要的朋友可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章