前端小白獻醜了，描述下實現思路。

• 有兩個div組成了彈出框。兩個div的級別是兄弟關係。
• 其中一個div是為了遮擋後面的內容
• 第二個div是為了顯示彈出框的實際內容

html部分

<!-- 這個是用來遮罩的 -->
<div id="modelDiv">
</div>
<!-- 這個是用來展示彈框內容的 -->
<div id="model">
    <div style="float: right;height: 20px; width: 20px;border-radius: 50%; border: 2px solid red;text-align: center;"
 
 onclick="closeModel()">
        X
    </div>
    彈出視窗
</div>

css部分

// 遮擋部分CSS
#modelDiv {
        height: 100%;
        width: 100%;
        // 頁面定位到最上面
        position: absolute;
        top:0;
        left:0;
        background: silver;
        // 透明度這樣能看到後面的內容效果真實一些
        opacity:0.8;
 

        // 遮擋級別最好高一些，防止別的內容會突然出現在你的彈出層上面，這就尷尬了。
        z-index: 99;
    }
    // 彈出框內容CSS
    #model {
        width: 300px;
        height: 200px;
        background: #959FA9;
        border-radius: 10px;
        padding: 15px;
        position: absolute;
        top: 200px;
        left: 42%;
        z-index
 
: 99;
    }

JavaScript部分

// 頁面一進入就打開了彈出框。所以直接遮擋
// 此處是用來解決如果你的頁面過大會出現滾動條，這樣遮罩層只能遮擋你的可見部分滾動內容無法折騰的問題。
document.body.style.overflow = 'hidden';
/**
* 關閉彈出框的功能
*/
function closeModel() {
        document.getElementById("model").style.display = 'none';
        document.getElementById("modelDiv").style.display = 'none';
        // 不遮擋後面的內容將body設定為原始樣式，也就是實現可滾動
        document.body.style.overflow = 'auto';
    }