今天给大家带来的是和confirm,alert功能相似的代码块，有些的不好的地方请指出来，让我们共同成长，如果有不懂的也可以私聊我，我会为你详细解说。

本文有以下三个段落

1.功能代码块展示,弹框功能尺寸适用手机在电脑上看会比较大。

//弹出对话框:传了cancel是confirm,不传就是alert弹框
function Confirm(obj) {
    let _obj = obj || {};
    //视图层
    let div = '<div id="_bj" style="">' +
            '<div id="Kuang" style="">' +
                '<h3 id="Tishi">提    示</h3>' +
                '<span id="_content"></span>' +
                '<div id="_cancel" class="XuanZhe" style="left:0;">取 消</div>' +
                '<div id="_determine"class="XuanZhe"style="right:0;borderleft:0.5px solid gainsboro;">确  定</div>' +
            '</div>' +
        '</div>';
    $("body").append(div);
    
    //css样式层
    $("#_bj").css({
        position:"fixed",
        top:0,left:0,
        textAlign:"center",
        width:"100vw",
        height:"100vh",
        zIndex: 998,
        background:"rgba(0,0,0,.3)",
    });
    $("#Kuang").css({
        position:"absolute",
        textAlign:"center",
        top:"50%",left:"50%",
        transform:"translate(-50%,-50%)",
        width:"900px",
        height:"450px",
        background:"#f8f8f8",
        borderRadius:"20px",
        fontSize:"50px"
    });
    //传入一个选项是alert框，两个是confirm框
    if(_obj.cancel!=""&&_obj.cancel!=null){
        $(".XuanZhe").css({
            position:"absolute",
            textAlign:"center",
            width:"50%",
            color:"#287ae8",
            borderTop:"0.5px solid gainsboro",
            bottom:0,
            lineHeight:"150px"
        });
        $("#_cancel").html(_obj.cancel);
        //交互层
        $("#_cancel").click(function() {
            $("#_bj").remove();
            _obj.callback && _obj.callback(false);
        });
        $("#_determine").click(function() {
            $("#_bj").remove();
            _obj.callback && _obj.callback(true);
        });
    }else{
        $(".XuanZhe").css({
            position:"absolute",
            textAlign:"center",
            width:"100%",
            color:"#287ae8",
            borderTop:"0.5px solid gainsboro",
            borderLeft:"none",
            left:0,
            bottom:0,
            lineHeight:"150px"
        });
        $("#_cancel").hide();
        $("#_determine").click(function() {
            $("#_bj").remove();
            _obj.callback && _obj.callback();
        });
    }
    $("#_determine").html(_obj.determine);
    $("#_content").html(_obj.content || "确定吗");
}

2.代码调用说明

2.1调用时传了cancel,弹出的是confirm
$("#btn").click(function(){
    Confirm({
            content: "确定要删除吗",cancel:"修改",determine:"删除",
        callback: function(res) {//回调函数，返回true，false
            console.log(res);
        }
    });
});

confirm.jpg

2.2调用时没有传cancel,弹出的是alert
$("#btn").click(function(){
    Confirm({
        content: "你真的喜欢我吗？",determine:"确定",
        callback: function(res) {//回调函数没有返回值
            console.log("喜欢");
        }
    });
});

alert.jpg

3.希望大家给点优化建议，让它更好的为广大的程序员们服务。