純粋なJSは極めて簡単なポップアップボックスを実現する

前端の白は恥をかいて、実現の構想を説明します.

には2つのdivがポップアップボックスを構成している.2つのdivのレベルは兄弟関係です.

のうちの1つのdivは、後のコンテンツ

を隠すためである.

の2番目の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';
    }