成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2750人閱讀

摘要：當(dāng)彈框彈出時原頁面內(nèi)容不能滾動，即將樣式設(shè)為原頁面的內(nèi)容就不會動了當(dāng)彈框關(guān)閉后再將樣式改為默認的中的寫一個函數(shù)，再在彈框的中調(diào)用函數(shù)。

彈出彈框

效果展示

實現(xiàn)原理

  1. html結(jié)構(gòu)比較簡單，即：

    遮罩層
    
    彈框

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

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

代碼實現(xiàn)

HTML:

1 <div>
2     <button class="open">點我彈出彈框button>
3 div>
4 <div class="box">
5     <div class="container">
6         <button class="close">關(guān)閉彈框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;//根據(jù)自己頁面情況設(shè)置
14 }
15 .container {
16     width: 500px;
17     height: 200px;
18     position: absolute;
19     top: 50%;//以下3行設(shè)置彈框居中頁面，根據(jù)自己頁面情況選擇
20     left: 50%;
21     transform: translate(-50%, -50%);
22     background: #fff;
23     z-index: 5;//根據(jù)自己頁面情況設(shè)置
24 }
 

JavaScript:

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

 

原頁面內(nèi)容不可滾動彈框內(nèi)容可滾動

效果展示

實現(xiàn)原理

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

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

  3. 2中的JS寫一個函數(shù)，再在彈框的JQ中調(diào)用函數(shù)。

代碼實現(xiàn)

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中需要增加調(diào)用toggleBody()函數(shù)

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

 *有錯誤的地方歡迎指正

 *轉(zhuǎn)載請注明出處

 

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1254.html

相關(guān)文章

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

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

    pf_miles 評論0 收藏0

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

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

    baukh789 評論0 收藏0

  • 懶加載、瀑布流和LightBox實現(xiàn)圖片搜索效果

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

    rainyang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<