使用jQuery/JavaScript创建确认消息的最简单方法是什么？

Question

我该如何实现这个功能？

1. 用户点击删除链接（class为“confirm”）。
2. 确认消息出现，询问“您确定吗？”并提供“Yes”和“Cancel”选项。

如果选择“Yes”，则继续执行点击的链接操作，但如果选择“Cancel”，则操作将被取消。

更新：最终可工作的代码使用了confirm()，感谢这位大佬：

$('.confirm').click(function() {
    return confirm("Are you sure you want to delete this?");
});

- Andrew

---

你把它放在$(document).ready(){}里了吗？ - helloandre

是的，它在我的文档准备好了。 - Andrew

Answer 1

Javascript 提供了一个内置的确认对话框。

if (confirm("Are you sure?"))
{
    // continue with delete
}

- Joel

---

将会给你“确定”和“取消”的选项。 - Robert Harvey

@Robert：没错，但是OP想要“最简单的方法”。这个方法已经很接近了。 - Joel

这是最简单的选项，但请记住，无法对对话框进行任何样式设置。我不太熟悉jquery，但看起来Robert已经链接到了一个带有样式选项的jquery插件。 - Johrn

谢谢，但您能否提供禁用点击的代码，以便在单击“取消”后不会继续执行吗？ - Andrew

@Andrew：confirm() 返回一个布尔值，该值与所选按钮匹配。只需将要确认的内容放在 if 语句中，如果用户点击取消，则不会执行。 - Joel

Answer 2

在我的经验中，这是最好、最简单的确认方式！

<a href="#" onclick="return myconfirm()">Confirm</a>
<script>
function myconfirm()
{
    if(confirm('Are You Sure ...'))
        return true;
    return false;
}
</script>

- Nima Ghaedsharafi

---

一个更简单的方法是使用 confirm 函数的返回值：onclick="return confirm('你确定吗？')"。 - Andrew

Answer 3

我已经成功地在Jquery中实现了确认框。在尝试此操作之前，请确保您的代码中包含Jquery库和CSS（jquery-ui-1.8.16.custom.css，jquery-1.6.2.js，jquery-ui-1.8.16.custom.min.js）。 使用DIV创建的确认框与JavaScript确认框的主要区别在于JavaScript确认框将等待用户输入，用户输入“是”/“否”后，下一行将执行，在这里，您必须在“是”或“否”块中执行--**showConfirm()后的下一行代码将立即执行*，所以请小心。

/** add this div to your html

*/

var $confirm;
var callBack;
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>';
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">';
var messageStyleEnd = '</span>';


$(document).ready(function(){
    $('#confirmDialog').dialog({
            autoOpen: false,
            modal: true
    });


    //jquery confirm box -- the general alert box
    $confirm = $('<div  style="vertical-align:middle;"></div>')
    .html('This Message will be replaced!')
    .dialog({
        autoOpen: false,
        modal: true,
        position: 'top',
        height:300,
        width: 460,
        modal: true,
        buttons: {
            Ok   : function() {
                $( this ).dialog( "close" );
                if(null != callBack)
                    callBack.success();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                if(null != callBack)
                    callBack.fail();
            }
        }
    }); 

});

    function showConfirm(message,callBackMe,title){
    callBack = null;
    $confirm.html(""); // work around
    $confirm.html(iconStyle + messageStyleStart +message + messageStyleEnd);
    if(title =='undefined'|| null ==title)
        $confirm.dialog( "option", "title", "Please confirm" );
    else
        $confirm.dialog( "option", "title", title);
    var val = $confirm.dialog('open');
    callBack = callBackMe;
    // prevent the default action
    return true;
}

    // Now for calling the function 
// create a Javascript/jSOn callback object 

var callMeBack = {
                    success: function()
                            {   // call your yes function here                                  
                                clickedYes();
                                return;
                            },
                    fail: function (){
                                // call your 'no' function here
                                 clickedNo();
                                return ;
                            }
                };


    showConfirm("Do you want to Exit ?<br/>"+
                    ,callMeBack1,"Please Answer");

- Vins