Javascript 替换警报/提示/确认对话框

我想用我自己的替换默认的警报/提示/确认，不想使用插件。我做了样式设计，但在单击按钮时，我可以确定操作（Ok/cancel/etc…）。这是到目前为止我的代码

function jPromt(title,content,type,callback){
    var alert = $('.resources').find('.alert').clone(); //basic barebone
        alert.find('h3').html(title);
        alert.find('.content').prepend(content);

    var options = {
        "_prompt" : {"OK" :""},
        "_confirm": {"No" :"recomended", "Yes":""},
        "_input"  : {"Cancel":"recomended", "OK" :""}
    }

    for (var prop in obj) { // Create buttons
        if (obj.hasOwnProperty(prop)) { 
            var btn = "<button class='button_"+prop+" "+obj[prop]+"'>"+prop+"</button>";
            alert.find('.buttons').append(btn);

        }
    }

    $('.resource_loader').append(alert)
    $('body').append(alert).center().fadeIn('fast');

    // This is here I'm not realy sure what to do whit callbaks for each button.

    //if (callback && typeof(callback) === "function") {  
    //  callback();  
    //} 
}

JSFiddle：

---

先谢谢你。我肯定会选择正确的答案。

您只需稍作修改即可实现这一点：

将对象作为

回调

参数传递（我将其重命名为

回调

），其中键表示按钮，使用为选项定义的相同格式（

“Yes”

，

“No”

等）。您的呼叫应如下所示：

jPromt("test THE title","testing the contents","_confirm", {
    'No' : function(){
        alert("testing NO");
    },
    'Yes' : function(){
        alert("testing YES");
    }
});

将

btn

作为循环中的jQuery对象，覆盖

obj

，这样就可以附加处理程序

检查

回调

参数是否有当前

属性的处理程序

；如果是，请附加到

btn

演示：

您可以做的是

为按钮提供调用回调的实际单击处理程序

在回调中，检查实际单击的按钮

类似于

function jPromt(title,content,type,callback){
    var myAlert = $('.resources').find('.alert').clone(); //basic barebone
        myAlert.find('h3').html(title);
        myAlert.find('.content').prepend(content);

    var options = {
        "_prompt" : {"OK" :""},
        "_confirm": {"No" :"recomended", "Yes":""},
        "_input"  : {"Cancel":"recomended", "OK" :""}
    };

    if( options.hasOwnProperty(type) ){
        obj = options[type];
    }

    for (var prop in obj) { // Create buttons
        var $btn = $("<button class='button_"+prop+" "+obj[prop]+"'>"+prop+"</button>");
        $btn.attr('btn-type',prop.toUpperCase());
        myAlert.find('.buttons').append($btn);
        $btn.click(callback);
    }

    $('body').append(myAlert.show());
}

jPromt("test THE title","testing the contents","_confirm",
    function(){
        answer = $(this).attr('btn-type');
        if(answer == 'YES'){
            alert("Yes!");
        }else{
            alert("No!");
        }
    }
);

函数jPromt（标题、内容、类型、回调）{
var myAlert=$（'.resources'）.find（'.alert'）.clone（）；//基本的裸骨
myAlert.find（'h3'）.html（标题）；
myAlert.find（'.content'）.prepend（content）；
变量选项={
“_提示符：{”确定“}，
确认：{“否”：“建议”，“是”：“}，
_输入：{“取消”：“建议”，“确定”：“}
};
if（options.hasOwnProperty（类型））{
obj=选项[类型]；
}
对于（obj中的var prop）{//创建按钮
变量$btn=$（“”+prop+“”）；
$btn.attr（'btn-type'，prop.toUpperCase（））；
myAlert.find（'.buttons'）.append（$btn）；
$btn.单击（回调）；
}
$（'body'）.append（myAlert.show（））；
}
jPromt（“测试标题”、“测试内容”、“确认”，
函数（）{
答案=$（this.attr（'btn-type'）；
如果（回答=‘是’）{
警惕（“是的！”）；
}否则{
警惕（“不！”）；
}
}
);

---

请参阅…

等待不是一个问题，它是为按钮$（..）创建的句柄。单击（…这是处理所有事情的地方。这也是示例代码。@Teemu为什么你认为OP希望它是同步的？当前的代码似乎期望它是异步的。谢谢@bfavaretto我正要这么说。你是向导还是什么？非常感谢。

function jPromt(title,content,type,callback){
    var myAlert = $('.resources').find('.alert').clone(); //basic barebone
        myAlert.find('h3').html(title);
        myAlert.find('.content').prepend(content);

    var options = {
        "_prompt" : {"OK" :""},
        "_confirm": {"No" :"recomended", "Yes":""},
        "_input"  : {"Cancel":"recomended", "OK" :""}
    };

    if( options.hasOwnProperty(type) ){
        obj = options[type];
    }

    for (var prop in obj) { // Create buttons
        var $btn = $("<button class='button_"+prop+" "+obj[prop]+"'>"+prop+"</button>");
        $btn.attr('btn-type',prop.toUpperCase());
        myAlert.find('.buttons').append($btn);
        $btn.click(callback);
    }

    $('body').append(myAlert.show());
}

jPromt("test THE title","testing the contents","_confirm",
    function(){
        answer = $(this).attr('btn-type');
        if(answer == 'YES'){
            alert("Yes!");
        }else{
            alert("No!");
        }
    }
);