写一个HTML弹窗

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

CSS样式


HTML代码

<div id="myModal" class="modal">
    
    <div class="modal-content">
        <span class="close" id="close">×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>
                    
                <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()
}

你可能感兴趣的:(笔记,html,javascript,css)