Confirm deletion using Bootstrap 3 modal box

bootstrap modal confirmation dialog on delete
bootstrap modal delete confirmation php
bootstrap 4 confirm dialog
bootstrap modal popup
bootstrap confirmation
jquery confirm dialog
jquery delete confirmation dialog example
bootstrap 3 yes no dialog

I need to confirm deletion using Bootstrap 3 modal box (YES/NO). How can I create this?

HTML code:

<form action="blah" method="POST">
    <button class='btn' type="submit" name="remove_levels" value="delete">
        <span class="fa fa-times"></span> Delete
    </button>
</form>

You need the modal in your HTML. When the delete button is clicked it popup the modal. It's also important to prevent the click of that button from submitting the form. When the confirmation is clicked the form will submit.

$('button[name="remove_levels"]').on('click', function(e) {
  var $form = $(this).closest('form');
  e.preventDefault();
  $('#confirm').modal({
      backdrop: 'static',
      keyboard: false
  })
  .on('click', '#delete', function(e) {
      $form.trigger('submit');
    });
});
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<form action="#" method="POST">
  <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

Bootstrap 3 - One Delete Confirm Dialog For All, Anyways, I'm not talking more about this but going to the main topic and it's how to use one modal dialog for any/every delete confirmation of the application with​  Bootstrap 3 - One Delete Confirm Dialog For All - Sheikh Heera. Software Developer and CTO at Authlab. Mostly work with Laravel, WordPress and Vue js but also a seasonal Node js developer and always a learner. Software Developer and CTO at Authlab.

You can use Bootbox dialog boxes

$(document).ready(function() {

  $('#btnDelete').click(function() {
    bootbox.confirm("Are you sure want to delete?", function(result) {
      alert("Confirm result: " + result);
    });
  });
});

Plunker Demo

How To Create a Delete Confirmation Modal, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Use of default JavaScript confirm modal is common in website to make sure to delete the records or not. The Bootstrap confirms dialogs are very smooth and better UI than default JavaScript confirm dialog. So here we have cover up functionality to display records with PHP and MySQL and then handle record delete with Bootstrap Confirm Modal using

I've the same problem just today. This is my solution (which I think is better and simpler):

<!-- Modal dialog -->
<div class="modal fade" id="frmPrenotazione" tabindex="-1">
    <!-- CUTTED -->
    <div id="step1" class="modal-footer">
      <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
    </div>
</div>

<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="confirmMessage">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="confirmOk">Ok</button>
                <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

And in my .js:

$('#btnDelete').on('click', function(e){
    confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
        //My code to delete
    });
});

function confirmDialog(message, onConfirm){
    var fClose = function(){
        modal.modal("hide");
    };
    var modal = $("#confirmModal");
    modal.modal("show");
    $("#confirmMessage").empty().append(message);
    $("#confirmOk").unbind().one('click', onConfirm).one('click', fClose);
    $("#confirmCancel").unbind().one("click", fClose);
}

Using unbind before the one prevents that the removal function is invoked at the next opening of the dialog.

I hope this could be helpful.

Follow a complete example:

var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
      $('#btnDelete').on('click', function(e){
    		confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
    			//My code to delete
          console.log("deleted!");
    		});
    	});

        function confirmDialog(message, onConfirm){
    	    var fClose = function(){
    			  modal.modal("hide");
    	    };
    	    var modal = $("#confirmModal");
    	    modal.modal("show");
    	    $("#confirmMessage").empty().append(message);
    	    $("#confirmOk").unbind().one('click', onConfirm).one('click', fClose);
    	    $("#confirmCancel").unbind().one("click", fClose);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
    <!-- CUTTED -->
      <div id="step1" class="modal-footer">
    <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
  </div>
</div>

  <!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body" id="confirmMessage">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="confirmOk">Ok</button>
            <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
          </div>
    </div>
  </div>
</div>

Bootstrap Delete Confirmation Modal Template, Bootstrap Delete Confirmation Modal Note: This is a hybrid layout that works with both Bootstrap 3 & 4 versions. Simple Success Confirmation Popup. BS3  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I need to confirm deletion using Bootstrap 3 modal

simple way to use modals is with eModal!

Ex from github:

  1. Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

    var options = {
            message: "The famouse question?",
            title: 'Header title',
            size: 'sm',
            callback: function(result) { result ? doActionTrue(result) :    doActionFalse(); },
            subtitle: 'smaller text header',
            label: "True"   // use the possitive lable as key
            //...
        };
                     
    eModal.confirm(options);
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

Live Demo: Bootstrap Delete Confirmation Modal, Try and test HTML code online in a simple and easy way using our free HTML editor and see the results in real-time. I am trying to make a dialog with bootstrap modal to confirm a delete. The delete works well, except it doesn't get the data which I select but it gets the first data in ID order from the database.

$('.launchConfirm').on('click', function (e) {
    $('#confirm')
        .modal({ backdrop: 'static', keyboard: false })
        .one('click', '#delete', function (e) {
            //delete function
        });
});

FIDDLE

For your button:

<button class='btn btn-danger btn-xs launchConfirm' type="button" name="remove_levels"><span class="fa fa-times"></span> delete</button></td>

Confirm Delete Modal Dialog in BootStrap | Example, 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  How to create confirmation box using Bootstrap modal. 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

Simple Bootstrap 4 Modal Delete Confirm - General Web Dev, I want to add a delete confirm box (modal… Using a basic Bootstrap 4 modal, below, I can get most of what I want to do done except for one thing… if I click NO the modal just closes… PaulOB March 25, 2019, 3:38pm #2. This tip aims to develop a confirmation box which provides Yes and No buttons using JQuery and Bootstrap. This article will make use of Bootstrap's Modal Dialog as an example while developing a confirmation box. We will develop a confirmation box without using plugin libraries specially designed for confirmation dialog boxes. Background

08, 08 - Delete Data with Bootstrap Modal Window Confirm in Laravel 5.5. In this part of the Duration: 12:09 Posted: Jan 31, 2018 vous avez besoin du modal dans votre HTML. Lorsque le bouton Supprimer est cliqué il Pop le modal. Il est également important d'empêcher le clic de ce bouton de soumettre le formulaire.

Bootstrap Modal as Delete confirm on Codeply, An example of using Bootstrap modal as a delete / confirm. Codeply example. aria-hidden="true">. <div class="modal-dialog">. <div class="modal-content">. Tip: Plugins can be included individually (using Bootstrap's individual "modal.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js"). How To Create a Modal The following example shows how to create a basic modal:

Comments
  • stackoverflow.com/a/42346781/4316802
  • This works great, with one side note: If I click in delete, after If I click in cancel, then I click in delete again, in my case scenario, the submit is sent 2 times. It should submit only one.
  • @Khrys, you should verify that you have included e.prevenDefault()
  • There's a problem here. Take notice that if you are using this to confirm delete something with some kind of ID. What happens is, if you click "Cancel" the event will still be attached to the modal. If you after click another thing to delete, it will delete both.
  • for the issue on the previous comments Pedro noted. $('#confirm').unbind() helps to unbind attached events
  • Check my answer here - stackoverflow.com/questions/8982295/… for a reusable component.
  • Be careful, bootbox may conflict with bootstrap modals. Sorry for responding to old question but I just came across with this problem.
  • Thanks a lot! It works fine! +1
  • This isn't within the context of the given code. How does OP apply this to his/her code?