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

Bootstrap popup modal as confirm dialog

 In this post i will explain in detail how to use bootstrap modal box as confirm dialog for delete or update action.  

Windows confirm

The confirm () method displays a dialog box with a specified message, along with an OK and a Cancel button.           

Problem with windows confirm

What if you want some nice design for windows confirm and want to apply CSS?

Windows confirm () alerts cannot be styled, they are generic to the browser.

What if someone wants to apply CSS to confirm box or nice design?

Answer is, use bootstrap model popup box.

How to use bootstrap confirm box for following .net MVC action?

 @Html.ActionLink("Delete", "Delete", new { id= item.id }, new { id = "btnDelete",
@class = "btn btn-sm", onclick = "return confirm('Are you sure you wish to delete?');" })

OR

<a href="@Url.Action("Update", "Products", new { ud= item.id })" id="btnUpdate" class="btn
btn-sm"  onclick="return confirm('Are you sure you wish to update?');" /> 

 

Bootstrap model box solution for windows confirm

Add following bootstrap model html code in shared layout or in same view

<!-- Modal -->
   <div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
       <div class="modal-content">
     <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLabel">Confirm</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>

 

Remove windows confirm onclick call

@Html.ActionLink("Delete", "Delete", new { id= item.id }, new { id = "btnDelete", @class = "btn btn-sm"})

OR

<a href="@Url.Action("Update", "Products", new { ud= item.id })" id="btnUpdate" class="btn btn-sm" />

 

Add bootstrap popup code in jQuery delete button Click event, same call you can create for edit action also

 

$("#btnDelete").click(function (event)
{
    var delhref = $(this).attr('href');
    var isOk = false;
    event.preventDefault();
    $("#confirmMsg").text("Are you sure you wish to delete?");
    $('#sampleModel').modal({
        backdrop: 'static',
        keyboard: false
    });
 
    $("#sampleModel").off("click").on("click", "#btnOk", function (e) {
        e.preventDefault();
        $('#sampleModel').modal("hide");
        $('#sampleModel').data("modal", null);
        isOk = true;
    });
 
    $("#btnCancel").off("click").on("click", function (e) {
        e.preventDefault();
        $("#sampleModel").modal("hide");
        $("#sampleModel").data("modal", null);
        isOk = false;
    });
 
    $("#btnClose").off("click").on("click", function (e) {
        e.preventDefault();
        $("#sampleModel").modal("hide");
        $('#sampleModel').data("modal", null);
        isOk = false;
    });
 
    $("#sampleModel").off("hidden.bs.modal").on("hidden.bs.modal", function (e) {
        e.preventDefault();
        if (isOk) {
            //here you require some customization in URl, change according to your requirement
           window.location.href = window.location.href + delhref;
        }
    })
    return isOk;
});

Invalid entry,please enter valid data.

Loading