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">&times;</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>
                                                        

Try it »

If you run the above example it will produce output something like this –

Confirm Delete Modal Dialog in BootStrap

Tags

bootstrap confirmation example

bootstrap modal confirmation dialog on delete


Advertisements

Add Comment

📖 Read More