In bootstrap there is a component known as modal dialog which is a very useful thing and most often used in a web application with rich user interface to show the user a confirmation dialog (Bootstrap modal) with two choices, for example, if a button click action deletes a record from the database then we may want to show a confirmation to the user so user can choose an option by clicking on a button and it’s how to use one modal dialog for any/every delete confirmation of the application with different confirmation messages
Assuming bootstrap.css and bootstrap.js are added properly
step 1 :- Adding html button to delete a record.
<button id="delete_id">Delete</button>
step 2 :- Adding bootstrap modal code.
<div id="delete-confirm" class="modal" data-backdrop="static" data-keyboard="false"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title text-center">Attention</h4> </div> <div class="modal-body"> <p class="text-center">Are you sure you want to delete this record?</p> <form action="delete.php" method="post"> <div class="text-center"><button class=" btn btn-primary " type="submit"> Okay</button> <button class=" btn btn-primary " type="button" data-dismiss="modal"> Cancel</button></div> </form></div> </div> </div> </div> </div>
step 3 :- connect step 1 and 2 using jquery.
$('#delete_id').on('click',function(){
$('#delete-confirm').modal('show');
});
Explanation : In step 1 I created a button with id delete_id. When this button on click, it will call the modal with id delete-confirm.
In the modal (step 2), I kept a form with action delete.php. If the user press the Okay button in the modal, the form will get submitted and if user press cancel button the modal will get disappear because of data-dismiss="modal".
Enjoy the code.