Confirm Delete Modal Dialog in BootStrap
Confirm Delete Modal Dialog in BootStrap – Confirm Delete functionality can be implemented using the bootstrap modal. Here in this tutorial we are going to explain how you can use the Bootstrap Modal as Delete confirmation. You can use our online editor to edit and run the example code.
How to Create Confirm Delete Modal Dialog in BootStrap?
Confirm delete modal basically asks the confirmation of the deletion if user clicks on yes then it will proceed to delete the record otherwise it will not do anything. Here we are going to create a function which will create delete confirmation using bootstrap modal.
Steps to create Confirm Delete Modal Prompt.
Step 1 : Create Button
Create Delete Button and bind the modal popup Event. Now call a function which will open a modal asking confirmation. Pass Id(Or other data you wish) to the function as below-
Confirm Delete Modal Dialog in BootStrap Example :
<button type="button" class="btn btn-info btn-lg" onclick="confirmDeleteModal('112')">Delete Data With Id 112</button>
|
Now let us create javascript part.
Step 2 : Create JavaScript Part
JavaScript Part contains two functions – one for opening the modal and other to perform delete action .
Confirm Delete Modal Dialog in BootStrap Example :
<script type="text/javascript">
function confirmDeleteModal(id){
$('#deleteModal').modal();
$('#deleteButton').html('<a class="btn btn-danger" onclick="deleteData('+id+')">Delete</a>');
}
function deleteData(id){
// do your stuffs with id
$("#successMessage").html("Record With id "+id+" Deleted successfully!");
$('#deleteModal').modal('hide'); // now close modal
}
</script>
|
The above function confirmDeleteModal() will open bootstrap modal and create a delete button which will call deleteData() function on delete button click and pass the id as parameter.
Complete Code Html & JS Part –
Confirm Delete Modal Dialog in Twitter BootStrap
<html>
<head>
<title>Bootstrap Modal Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
function confirmDeleteModal(id){
$('#deleteModal').modal();
$('#deleteButton').html('<a class="btn btn-danger" onclick="deleteData('+id+')">Delete</a>');
}
function deleteData(id){
// do your stuffs with id
$("#successMessage").html("Record With id "+id+" Deleted successfully!");
$('#deleteModal').modal('hide'); // now close modal
}
</script>
</head>
<body>
<div class="container" style="padding:150px;">
<!----modal starts here--->
<div id="deleteModal" class="modal fade" role='dialog'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete </h4>
</div>
<div class="modal-body">
<p>Do You Really Want to Delete This ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<span id= 'deleteButton'></span>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
<button type="button" class="btn btn-info btn-lg" onclick="confirmDeleteModal('112')">Delete Data With Id 112</button><br>
<div id="successMessage" style="font-size:20px;color:green;font-weight:bold;"></div>
</div>
</body>
</html>
|
If you run the above example it will produce output something like this –
Tags
bootstrap confirmation example
bootstrap modal confirmation dialog on delete
Advertisements
