使用jquery的确认框

时间:2011-01-25 09:37:53

标签: jquery

我想在删除一些数据之前做出确认,那么我怎样才能使用jquery?

3 个答案:

答案 0 :(得分:19)

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

答案 1 :(得分:4)

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

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

答案 2 :(得分:0)

要进行对话,请使用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>