點選彈出帶有遮罩的視窗效果

antzone發表於2017-04-18
遮罩

分享一段程式碼例項，它實現了點選可以彈出層效果。

這個層在視窗中居中，且帶有半透明這招層。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.click_pop {
  display: block;
  width: 160px;
  margin: 100px auto;
  line-height: 40px;
  background-color: #60A1C9;
  color: #fff;
}
.bgPop {
  display: none;
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.2);
}
.pop {
  display: none;
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  border-radius: 35px;
  background-color: #ffe;
  box-shadow: 0 3px 18px rgba(0, 0, 0, .5);
}
.pop p {
  padding: 50px;
}
.cancel, .ok {
  position: absolute;
  bottom: 30px;
  left: 280px;
  width: 80px;
  height: 30px;
  border: none;
  border-radius: 15px;
  background-color: #00BA98;
  color: #fff;
  cursor: pointer;
}
.cancel {
  background-color: #999;
  left: 150px;
}
input:focus {
  outline: none;
}
.pop-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
  var $win = $(window);
  var $pop = $('.pop');
  //init()
  function init() {
    $('.bgPop').css({
      'width': $win.width(),
      'height': $win.height()
    });
    $pop.css({
      'left': ($win.width() - $pop.width()) / 2,
      'top': ($win.height() - $pop.height()) / 2
    });
  }
  init();
  //dragDrop
  var move = false;
  var offsetX = 0;
  var offsetY = 0;
  $pop.mousedown(function(e) {
    e.stopPropagation();
    move = true;
    offsetX = e.offsetX;
    offsetY = e.offsetY;
    $pop.css({
      'cursor': 'move'
    });
  }).mouseup(function() {
    move = false;
    $pop.css({
      'cursor': 'default'
    });
  });
  $(document).mousemove(function(e) {
    if (!move) return;
 
    var x = e.clientX - offsetX;
    var y = e.clientY - offsetY;
    if (!(x < 0 || y < 0 || x > $pop.position().left * 2 || y > $pop.position().top * 2)) {
      $pop.css({
        'left': x,
        'top': y
      });
    }
  });
  //click
  $('.click_pop').click(function(e) {
    init();
    $win.resize(function() {
      var wWidth = $win.width();
      var wHeight = $win.height();
      $('.bgPop').css({
        'width': wWidth,
        'height': wHeight
      });
      $pop.css({
        'left': (wWidth - $pop.width()) / 2,
        'top': (wHeight - $pop.height()) / 2
      });
    });
    $('.bgPop,.pop').show();
  });
  $('.cancel').click(function(e) {
    $('.bgPop,.pop').hide();
  });
})
</script>
</head>
<body>
  <button class="click_pop">show</button>
  <div class="bgPop"></div>
  <div class="pop">
    <p></p>
    <input type="button" value="Cancel" class="cancel" />
    <input type="button" value="OK" class="ok" />
  </div>
</body>
</html>

相關文章