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

彈出彈框

效果展示

實現原理

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

   <div>遮罩層
       <div>彈框</div>
   </div>

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

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

代碼實現

HTML:

<div>
    <button class="open">點我彈出彈框</button>
</div>
<div class="box">
    <div class="container">
        <button class="close">關閉彈框</button>
    </div>
</div>

CSS:

html, body {
    width:100%;
    height:100%;
}
.box {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(51,51,51,0.5);
    z-index: 3;//根據自己頁面情況設置
}
.container {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 50%;//以下3行設置彈框居中頁面，根據自己頁面情況選擇
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 5;//根據自己頁面情況設置
}

JavaScript:

$(document).ready(function(){
    $(".open").click(function(){
        $(".box").show();
    })
    $(".close").click(function(){
        $(".box").hide();
    })
})

 

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

效果展示

實現原理

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

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

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

代碼實現

CSS:

.container中增加一條

.container {
    overflow: auto;
}

JavaScript:

function toggleBody(isPopup) {
    if (isPopup) {
        document.body.style.height = '100%';
        document.body.style.overflow = 'hidden';
    }else {
        document.body.style.height = 'auto';
        document.body.style.overflow = 'auto';
    }
}

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

$(".open").click(function(){
    $(".box").show();
    toggleBody(1);//增加部分
})
$(".close").click(fundtion(){
    $(".box").hide();
    toggleBody(0);//增加部分
})

 *有錯誤的地方歡迎指正

 *轉載請注明出處