Confirmation box using jquery_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-06 08:53 出处：网络

i want to make a confirmation before delete some data so how开发者_JAVA技巧 can i make it using jquery?$(\'#deleteBtn\').click(function() {

相关专题：jquery

i want to make a confirmation before delete some data so how开发者_JAVA技巧 can i make it using jquery?

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

One possibility is to use the javascript confirm function.

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

To make a dialog, use the jQueryUI dialog. It includes modal & non-modal dialogs as well as good visual effects and a robust date-picker. There are also some plugins available to extend jQueryUI.

Here's an example

<!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>