写一个HTML弹窗

新创建一个html页面，放弹窗内容，使用$.modal.open()方法弹窗打开，弹窗写在当前页面，当页面比例缩放时遮罩层受影响。

CSS样式

<style>
        /* 弹窗 (background) */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 1; /* 设置在顶层 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /*overflow: auto;*/
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 弹窗内容 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 45%;
        }

        /* 关闭按钮 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
</style>

HTML代码

<div id="myModal" class="modal">
    <!-- 弹窗内容 -->
    <div class="modal-content">
        <span class="close" id="close">&times;</span>
        <p>提示</p>
        <!-- 文字前加图标 -->
        <div style="display: flex;flex-wrap: nowrap;justify-content: center;"><img src="/img/warning1.png" width="25" height="25"/> <p>发文内容文内容文内容文内容</p></div>
        <div style="display: flex;flex-wrap: nowrap;justify-content: center;line-height: 45px;">
            <input type="checkbox" id="ischeck" style="zoom: 150%;margin-top: 0;">
            <div style="margin-left: 5px;">我已知悉，并严格落实！</div>
        </div>

        <div>
            <div style="display: flex;flex-wrap: nowrap;justify-content: center;">
                <button type="button" class="btn btn-sm btn-success met2" onclick="submitBtn()">确 定</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-sm btn-danger met2" onclick="closeBtn()">关 闭</button>
            </div>
        </div>
    </div>
</div>

JS部分

// 点击(x), 关闭弹窗
var xBtn = document.getElementById("close")
xBtn.onclick = function () {
    document.getElementById("myModal").style.display = "none";
    $('#sendbtn').attr("disabled", true);
    $("#ischeck").prop("checked", false);
    //清空发文内容
    $.form.reset();
    //清除收文单位数组
    $("#orgname").val("");
    $("#sendorgids").val("");
    //清空附件
    var children = $("#attachmentDiv").children();
    children.remove()
}

// 点击确定按钮, 关闭弹窗，提交按钮设置disable
function submitBtn() {
    if ($('#ischeck').is(':checked')) {
        document.getElementById("myModal").style.display = "none";
        $('#sendbtn').attr("disabled", false);
    } else {
        $.modal.msgError("请先同意已知悉，并严格落实选项！");
    }
}

// 点击确定按钮, 关闭弹窗，提交按钮设置disable
function closeBtn() {
    document.getElementById("myModal").style.display = "none";
    $('#sendbtn').attr("disabled", true);
    $("#ischeck").prop("checked", false);
    //清空发文内容
    $.form.reset();
    //清除收文单位数组
    $("#orgname").val("");
    $("#sendorgids").val("");
    //清空附件
    var children = $("#attachmentDiv").children();
    children.remove()
}