2011-01-25 18 views
2

jqueryを使ってデータを削除するにはどうすればいいですか?jqueryを使用した確認ボックス

+1

が重複する可能性が[モーダルボックスが可能なjQueryのを使用して確認していますか?](http://stackoverflow.com/questions/878710/is-a-modal-confirm-box-使用可能なjquery可能) – jAndy

答えて

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

1つの可能性は、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> 
関連する問題