使用js实现弹窗

使用js实现弹窗

就不过多讲述了，尽量简洁一些，方便观看。是否能正常显示目前只尝试了！

• 360浏览器
• chrome

这是HTML代码

<button id="js_show">打开弹窗</button>
 <!-- 弹窗 -->
    <div class="modal">
        <div class="modal-content">
            <div class="modal-body">
                <div class="mb_revise">
                    <p>请输入您要修改的内容...</p>
                    <input type="text" class="xiugai">
                </div>
                <button class="determine">确定</button><button class="cancen">取消</button>
            </div>
        </div>
    </div>

css

/* 遮罩层 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        /* 弹窗 */
        .modal-content {
            position: fixed;
            top: 15%;
            left: 50%;
            margin-left: -25%;
            width: 45%;
            height: 70%;
            min-width: 31.125rem;
            min-height: 18.625rem;
            border-radius: .125rem;
            background-color: white;
            z-index: 2;
        }

        .modal-body {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .mb_revise {
            padding: .625rem 0 0 1.5625rem;
        }

        .mb_revise>p {
            padding-left: .25rem;
            margin-top: .125rem;
            font-family: 'FangSong', Times, serif;
            font-size: 15px;
            border-left: solid .125rem royalblue;
        }
        
        /*修改框*/
        .xiugai {
            height: 2em;
            width: 14.375rem;
            margin-top: .625rem;
        }

        /* 确定和取消 */
        .determine,
        .cancen {
            position: absolute;
            width: 3.625rem;
            height: 2.1875rem;
            color: #fff;
            border: 0;
            outline: none;
            box-shadow: 0 .125rem .125rem rgb(107, 96, 96);
            cursor: pointer;
        }

        .determine {
            right: 6.5rem;
            bottom: .725rem;
            background-color: rgba(9, 139, 245, 0.788);
        }

        .cancen {
            right: 2rem;
            bottom: .725rem;
            background-color: rgba(212, 37, 37, 0.788);
        }

        .determine:hover,
        .cancen:hover {
            color: #fff;
            box-shadow: 0 .134rem .1275rem rgb(58, 57, 57);
        }

        .determine:active,
        .cancen:active {
            box-shadow: 0 .134rem .1275rem rgba(230, 227, 227, .758);
        }

        // 打开弹窗
        var button = document.getElementById("js_show");
        button.onclick = function(){
	        var modal = document.querySelector(".modal");
            modal.style.display = "block";
        }
        // 点击取消 关闭弹窗
        var cancen = document.querySelector(".cancen");
        cancen.onclick = function(){
	        var modal = document.querySelector(".modal");
            modal.style.display = "none";
        }

效果展示