2011-01-25 75 views
2

我想在刪除一些數據之前進行確認,所以我如何使它使用jQuery?確認框使用jquery

+1

可能重複[是模態確認框使用jQuery可能嗎?](http://stackoverflow.com/questions/878710/is-a-modal-confirm-box-使用-jQuery的可能) – jAndy 2011-01-25 09:40:46

回答

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

一種可能性是使用javascript confirm函數。

$(function() { 
    $('#someLink').click(function() { 
     return confirm('Are you sure you want to delete this item?'); 
    }); 
}); 
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>