jQuery實現(xiàn)簡單彈窗遮罩效果

更新時間：2017年02月27日 15:35:31 作者：我本善良

本文主要介紹了jquery實現(xiàn)簡單彈窗遮罩效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧

效果圖：

圖（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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在myeclipse中如何加入jquery代碼提示功能
這篇文章主要介紹了在myeclipse中如何加入jquery代碼提示功能,需要的朋友可以參考下
2014-06-06
jquery multiSelect 多選下拉框
jquery multiSelect 多選下拉框?qū)崿F(xiàn)挨罵
2010-07-07
jQuery實現(xiàn)當(dāng)拉動滾動條到底部加載數(shù)據(jù)的方法分析
這篇文章主要介紹了jQuery實現(xiàn)當(dāng)拉動滾動條到底部加載數(shù)據(jù)的方法,結(jié)合實例形式分析了jQuery針對滾動事件的監(jiān)聽、響應(yīng)及數(shù)據(jù)加載相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
jquery.Ajax()方法調(diào)用Asp.Net后臺的方法解析
本篇文章主要是對jquery.Ajax()方法調(diào)用Asp.Net后臺的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
解決jQuery使用JSONP時產(chǎn)生的錯誤
這篇文章主要介紹了解決jQuery使用JSONP時產(chǎn)生的錯誤，需要的朋友可以參考下
2015-12-12
JavaScript 彈出子窗體并返回結(jié)果到父窗體的實現(xiàn)代碼
下面小編就為大家?guī)硪黄狫avaScript 彈出子窗體并返回結(jié)果到父窗體的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery中調(diào)用WebService方法小結(jié)
以前在寫ajax請求時，總是喜歡使用jQuery+ashx的方式進行調(diào)用，今天采取jQuery+WebService的方法來做ajax請求，發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。
2011-03-03
jQuery動態(tài)添加 input type=file的實現(xiàn)代碼
有時候需要在頁面上允許用戶上傳多個文件，個數(shù)由用戶自己決定，個數(shù)多了也可以刪除，使用jQuery可以很簡單的實現(xiàn)這個功能
2012-06-06
javascript向后臺傳送相同屬性的參數(shù)即數(shù)組參數(shù)
在傳送參數(shù)時，經(jīng)常會碰到向后臺傳送一些相同屬性的參數(shù)，最好的選擇是采用數(shù)組的方式，下面有個不錯的示例，大家可以參考下
2014-02-02
詳解jquery validate實現(xiàn)表單驗證（正則表達式）
本篇文章主要介紹了jquery validate實現(xiàn)表單驗證（正則表達式），用戶填寫表單時，可以快速地對用戶填寫的數(shù)據(jù)進行驗證，并做出反饋。有興趣的可以了解一下。
2017-01-01