Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Reusable custom bootstrap modal confirmation box

In this code snippets post I provided reusable Bootstrap Modal Dialog with code example.

Bootstrap JavaScript modal

Bootstrap JavaScript modal plugin you can use to add confirm dialogs, user notifications, or completely custom popup content.

Reusable bootstrap confirm box

Add following html code in your shared layout view

<!-- Modal -->
   <div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
       <div class="modal-content">
     <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLabel">Confirm message</h5>
  <button type="button" id="btnClose" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
          </button>
       </div>
    <div id="confirmMsg" class="modal-body">
    
     </div>
  <div class="modal-footer">
 <button type="button" id="btnCancel" class="btn btn-warning" data dismiss="modal">Cancel</button>
<button type="button" id="btnOk"  class="btn btn-success">Ok</button>
     </div>
       </div>
         </div>
          </div>

 

jQuery reusable model confirms box code to perform actions like delete, update, reject etc

Button Delete, Update, Reject events

//Perform delete 
$("#btnDelete").click(function (e)
{
 //Delete product on confrim ok click
  BsConfirmModel("Are you sure you wish to delete?", "Delete", e);
});
 
//Perform update
$("#btnUpdate").click(function (e) {
 //Update order on confrim ok click
  BsConfirmModel("Are you sure you wish to update?", "Update", e);
});
 
//Perform Reject order
$("#btnReject").click(function (e) {
  //Reject order on confrim ok click  
  BsConfirmModel("Are you sure you wish to reject?", "Reject", e);
});

 

Reusable bootstrap confirm function

function BsConfirmModel(msg, actionType,event) {
    event.preventDefault();
    $("#confirmMsg").text(msg);
    $('#bsModel').modal({
        backdrop: 'static',
        keyboard: false
    });
 
    $("#bsModel").off('click').on('click', '#btnOk', function (e) {
        e.preventDefault();
        switch (actionType) {
            case 'Delete':
                //code block
                // Ajax call to delete
 
                break;
            case 'Update':
                //code block
                // Ajax call to update
                break;
            case 'Approve':
                //code block
                // Ajax call to approve order
                break;
           
            case 'Reject':
                //code block
                // Ajax call to reject order
                break;
 
            default:
                //code block
                //default ajax call
                break;
 
        }
        $('#bsModel').modal('hide');
        $('#bsModel').data('modal', null);
    });
 
    $("#btnCancel").off("click").on('click', function (e) {
        e.preventDefault();
        $('#bsModel').modal('hide');
        $('#bsModel').data("modal", null);
    });
 
    $("#btnClose").off("click").on("click", function (e) {
        e.preventDefault();
        $("#bsModel").modal("hide");
        $('#bsModel').data("modal", null);
    });

Invalid entry,please enter valid data.

Loading