今天給大家?guī)淼氖呛蚦onfirm,alert功能相似的代碼塊，有些的不好的地方請指出來，讓我們共同成長，如果有不懂的也可以私聊我，我會為你詳細(xì)解說。

本文有以下三個段落

1.功能代碼塊展示,彈框功能尺寸適用手機(jī)在電腦上看會比較大。

//彈出對話框:傳了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"
    });
    //傳入一個選項(xiàng)是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.代碼調(diào)用說明

2.1調(diào)用時傳了cancel,彈出的是confirm
$("#btn").click(function(){
    Confirm({
            content: "確定要刪除嗎",cancel:"修改",determine:"刪除",
        callback: function(res) {//回調(diào)函數(shù)，返回true，false
            console.log(res);
        }
    });
});

confirm.jpg

2.2調(diào)用時沒有傳cancel,彈出的是alert
$("#btn").click(function(){
    Confirm({
        content: "你真的喜歡我嗎？",determine:"確定",
        callback: function(res) {//回調(diào)函數(shù)沒有返回值
            console.log("喜歡");
        }
    });
});

alert.jpg

3.希望大家給點(diǎn)優(yōu)化建議，讓它更好的為廣大的程序員們服務(wù)。