使用jquery的确认框答案

【问题标题】：Confirmation box using jquery使用jquery的确认框
【发布时间】：2011-01-25 09:37:53
【问题描述】：

我想在删除一些数据之前进行确认，那么如何使用 jquery 进行确认？

【问题讨论】：

Is a Modal Confirm Box Using JQuery Possible? 的可能重复项

标签： jquery

【解决方案1】：

$('#deleteBtn').click(function() {
  if(confirm("Are you sure?")) {
    //delete here
  }
});

【讨论】：

【解决方案2】：

一种可能性是使用 javascript confirm 函数。

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

【讨论】：

【解决方案3】：

要进行对话，请使用jQueryUI dialog。它包括模态和非模态对话框以及良好的视觉效果和强大的日期选择器。还有一些插件可用于扩展 jQueryUI。

这是一个例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/dot-luv/jquery-ui-1.8.6.custom.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script>
var setupKiller = function() {
    // Here's the text of the dialog box 
    var dialog = $("<div style='display: none'><p>Are you sure?</p></div>").appendTo("body");
    // This is the button on the form
    var button = $("<span>Kill</span>").appendTo("#killer").click(function () {
        var form = $("#killer")
        // The form button was pressed - open the dialog
        $(dialog).dialog(
        {
                title: "Confirm",
                modal: true,
                buttons: {
                    "Delete em": function () {
                        // This will invoke the form's action - putatively deleting the resources on the server
                        $(form).submit();
                        $(this).dialog("close");
                    },
                    "Cancel": function() {
                        // Don't invoke the action, just close the dialog
                        $(this).dialog("close");
                    }
                }
            });
        return false;
    });
    // Use jQuery UI styling for our button
    $(button).button();
}
</script>
</head>
<body onload="setupKiller();">
<form id='killer' method='POST'>
<p>Some Text</p>
</form>
</body>
</html>

【讨论】：