js

var confirm = function (param) {
    param = {
        title: param.title ? param.title : '密码',
        ok: param.ok
    }
    // 显示遮罩层
    $('#mask').removeClass('hide')
    // str内根据需求自定义弹框内容 
    var str = `
        <div id="confirmPsw_dialog" class="dialog">
            <div class="dialog_title">
                <h6>${param.title}</h6>
                <button class="close" id="close-confirmPswDialog">
                    <i class="icon-remove"></i>
                </button>
            </div>
            <hr>
            <div class="dialog_content">
                <form id="form_confirmPsw" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-3 form-group-item_label"> 输入密码 </label>
                        <div class="col-sm-9 form-group-item_value">
                            <input type="password" name="confirmPsw" class="col-xs-12" required />
                        </div>
                    </div>
                    <div class="dialog_foot">
                        <input type="submit" class="submit ok pull-right" value="确定" />
                    </div>         
                </form>
            </div>
        </div>
    `
    $('#main-container').append(str)

    $('#confirmPsw_dialog .ok').off().on('click', function () {
        // 使用jQuery Validate插件进行表单验证
        $('#form_confirmPsw').validate({
            rules: {
                confirmPsw: { required: true },
            },
            messages: {
                confirmPsw: { required: "请输入密码！" }
            },
            submitHandler: function () {
                let loginObj = {
                    username: JSON.parse($.session.get('userInfo')).username,
                    password: $('#confirmPsw_dialog input').val()
                }
                $.ajax({
                    type: 'POST',
                    url: 'cgi-bin/login.cgi',
                    data: JSON.stringify(loginObj),
                    contentType: 'application/json;charset=utf-8',
                    success: function (res) {
                        var dataInfo = res.result ? res : JSON.parse(res)
                        if (dataInfo.result == 'success') {
                            $('#confirmPsw_dialog').remove()
                            $('#mask').addClass('hide')
                            if (param.ok) {
                                param.ok('验证成功！')
                            }
                            param = {};
                        } else {
                            console.log('输入密码错误！')
                        }
                    },
                    error: function (xhr) {
                        console.log('error', xhr);
                    }
                })

            }
        })
    })
    $('#close-confirmPswDialog').off().on('click', function () {
        $('#confirmPsw_dialog').remove()
        // 遮罩层隐藏
        $('#mask').addClass('hide')
    })
}

// 调用：
confirm({
  title: '密码',
  ok: function (res) {
    // 验证成功之后的操作
  }
})

css

    .dialog {
        background-color: #fff;
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 30%;
        padding: 10px 20px;
        z-index: 1000;
    }
    .dialog .dialog_title h6 {
        display: inline-block;
        font-weight: 700;
    }
    .dialog .cancel {
        margin-right: 5px;
        background-color: #fff !important;
        border: 1px solid #428BCA;
        color: #428BCA !important;
    }
    .dialog .ok {
        background-color: #428BCA !important;
        border: 1px solid #428BCA;
        color: #fff !important;
    }
    /* 遮罩层 */
    #mask {
        width:100%;
        height:100vh;
        background-color: rgba(0, 0, 0, .25);
        position:fixed;
        top:0;
        left:0;
        z-index:100;
    }