jquery选择器|jQuery实现简单弹窗遮罩效果

效果图：

图（1）初始图

图（2）点击按钮后

代码如下：

 

 代码如下

 

 

 

 

 

 

 遮罩层

 

 

  x

 

 <scriptsrc="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>

 

 

jquery选择器|jQuery实现简单弹窗遮罩效果

http://m.bbyears.com/wangyezhizuo/126945.html

推荐访问:jquery面试题 jquery教程