国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單實現彈出彈框頁面背景半透明灰，彈框內容可滾動原頁面內容不可滾動的效果(JQuery)

番茄西紅柿 / 2672人閱讀

摘要：當彈框彈出時原頁面內容不能滾動，即將樣式設為原頁面的內容就不會動了當彈框關閉后再將樣式改為默認的中的寫一個函數，再在彈框的中調用函數。

彈出彈框

效果展示

實現原理

  1. html結構比較簡單，即：

    遮罩層
    
    彈框

  2. 先寫覆蓋顯示窗口的遮罩層div.box，因為要在整個窗口顯示固定，所以position要設為fixed，background設為灰色半透明，由于要遮住整個顯示屏，width和height都設為100%(body和html的width和height也都設為100%);

  3. 在遮罩層的div.box里寫彈框的div.container，位置相對于父級定位

代碼實現

HTML:

1 <div>
2     <button class="open">點我彈出彈框button>
3 div>
4 <div class="box">
5     <div class="container">
6         <button class="close">關閉彈框button>
7     div>
8 div>
 

CSS:

 1 html, body {
 2     width:100%;
 3     height:100%;
 4 }
 5 .box {
 6     display: none;
 7     width: 100%;
 8     height: 100%;
 9     position: fixed;
10     top: 0;
11     left: 0;
12     background: rgba(51,51,51,0.5);
13     z-index: 3;//根據自己頁面情況設置
14 }
15 .container {
16     width: 500px;
17     height: 200px;
18     position: absolute;
19     top: 50%;//以下3行設置彈框居中頁面，根據自己頁面情況選擇
20     left: 50%;
21     transform: translate(-50%, -50%);
22     background: #fff;
23     z-index: 5;//根據自己頁面情況設置
24 }
 

JavaScript:

1 $(document).ready(function(){
2     $(".open").click(function(){
3         $(".box").show();
4     })
5     $(".close").click(function(){
6         $(".box").hide();
7     })
8 })

 

原頁面內容不可滾動彈框內容可滾動

效果展示

實現原理

  1. 彈框內容需要滾動一定是內容超出彈框的高度，所以要給彈框內想滾動的部分設overflow: auto;

  2. 然后是Jq實現部分。當彈框彈出時原頁面內容不能滾動，即將body樣式設為overflow: hidden;原頁面的內容就不會動了；當彈框關閉后再將body樣式改為默認的overflow: auto;

  3. 2中的JS寫一個函數，再在彈框的JQ中調用函數。

代碼實現

CSS:

.container中增加一條

1 .container {
2     overflow: auto;
3 }
 

JavaScript:

1 function toggleBody(isPopup) {
2     if (isPopup) {
3         document.body.style.height = 100%;
4         document.body.style.overflow = hidden;
5     }else {
6         document.body.style.height = auto;
7         document.body.style.overflow = auto;
8     }
9 }
 

JQ中需要增加調用toggleBody()函數

1 $(".open").click(function(){
2     $(".box").show();
3     toggleBody(1);//增加部分
4 })
5 $(".close").click(fundtion(){
6     $(".box").hide();
7     toggleBody(0);//增加部分
8 })
 

 *有錯誤的地方歡迎指正

 *轉載請注明出處

 

 

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1254.html

相關文章

  • 移動端下彈框禁止背景滑動

    摘要：移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。 移動端下彈框禁止背景滑動 茴字寫法有很多種，找到最適合的才是好的。 以下下方法在一屛之內是可行的 body;html 設置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時 $(html, body,.pa...

    pf_miles 評論0 收藏0

  • 移動端下彈框禁止背景滑動

    摘要：移動端下彈框禁止背景滑動茴字寫法有很多種，找到最適合的才是好的。 移動端下彈框禁止背景滑動 茴字寫法有很多種，找到最適合的才是好的。 以下下方法在一屛之內是可行的 body;html 設置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時 $(html, body,.pa...

    baukh789 評論0 收藏0

  • 懶加載、瀑布流和LightBox實現圖片搜索效果

    摘要：無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數據瀑布流布局處理在頁面滾動時判斷最后一張圖片是否可見，如果是則重復以上內容查看源碼 開始 做一個小項目，算是對js和jQuery的一次練習吧。 圖片資源來自這個網站（上面有很多高清圖片關鍵還是免費下載的）：https://unsplash.com/ 項目具體效果可以點這里：https://bjw1234.github.io/ima......

    rainyang 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<