jQuery实现简单弹窗遮罩效果

2019-11-19 17:24:30

字体：大中小

来源：转载

供稿：网友

效果图：

图（1）初始图

图（2）点击按钮后

代码如下：

<!DOCTYPE HTML><html> <head> <meta charset="UTF-8" /> <title></title> <style>  #mask {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 999;  background: #666;  opacity: 0.5;  filter: alpha(opacity=50)-moz-opacity: 0.5;  display: none;  }  .popup {  position: absolute;  left: 50%;  width: 600px;  height: 200px;  background: #fff;  z-index: 1000;  border: 1px solid #333;  display: none;  }  .btn_close {  position: absolute;  top: 5px;  right: 5px;  } </style> </head> <body> <button class="btn_show">遮罩层</button> <div id="mask"></div> <div class="popup">  <button class="btn_close">x</button> </div> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <script>  $(function() {  $('.btn_show').click(function() {   $('#mask').css({   display: 'block',   height: $(document).height()   })   var $Popup = $('.popup');   $Popup.css({   left: ($('body').width() - $Popup.width()) / 2+ 'px',   top: ($(window).height() - $Popup.height()) / 2 + $(window).scrollTop() + 'px',   display: 'block'   })  })  $('.btn_close').click(function() {   $('#mask,.popup').css('display', 'none');  })  }) </script> </body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Bootstrap的popover(弹出框)在append后弹不出(失效)

下一篇：js 调用百度分享功能