Confirm deletion in modal dialog using Twitter Bootstrap

Question

I have an HTML table of rows tied to database rows. I'd like to have a "delete row" link for each row, but I would like to confirm with the user beforehand.

Is there any way to do this using the Twitter Bootstrap modal dialog?

User · Answer

When its comes to a relevantly big project we may need something re-usable. This is something I came with with help of SO.

confirmDelete.jsp

<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel"
 aria-hidden="true">
<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 Parmanently</h4>
        </div>
        <div class="modal-body" style="height: 75px">
            <p>Are you sure about this ?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-danger" id="confirm-delete-ok">Ok
            </button>
        </div>
    </div>
</div>

<script type="text/javascript">

    var url_for_deletion = "#";
    var success_redirect = window.location.href;

$('#confirmDelete').on('show.bs.modal', function (e) {
    var message = $(e.relatedTarget).attr('data-message');
    $(this).find('.modal-body p').text(message);
    var title = $(e.relatedTarget).attr('data-title');
    $(this).find('.modal-title').text(title);

    if (typeof  $(e.relatedTarget).attr('data-url') != 'undefined') {
        url_for_deletion = $(e.relatedTarget).attr('data-url');
    }
    if (typeof  $(e.relatedTarget).attr('data-success-url') != 'undefined') {
        success_redirect = $(e.relatedTarget).attr('data-success-url');
    }

});

<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm-delete-ok').on('click', function () {
    $.ajax({
        method: "delete",
        url: url_for_deletion,
    }).success(function (data) {
        window.location.href = success_redirect;
    }).fail(function (error) {
        console.log(error);
    });
    $('#confirmDelete').modal('hide');
    return false;
});
<script/>

reusingPage.jsp

<a href="#" class="table-link danger"
data-toggle="modal"
data-target="#confirmDelete"
data-title="Delete Something"
data-message="Are you sure you want to inactivate this something?"
data-url="client/32"
id="delete-client-32">
</a>
<!-- jQuery should come before this -->
<%@ include file="../some/path/confirmDelete.jsp" %>

Note: This uses http delete method for delete request, you can change it from javascript or, can send it using a data-attribute as in data-title or data-url etc, for support any request.

User · Answer

---------------------------------------------------------- Generic Confirm      function confirm heading  question  cancelButtonTxt  okButtonTxt  callback         var confirmModal              lt div class  modal hide fade  gt                     lt div class  modal-header  gt                   lt a class  close  data-dismiss  modal   gt  amp times  lt  a gt                   lt h3 gt     heading    lt  h3 gt                 lt  div gt                  lt div class  modal-body  gt                   lt p gt     question     lt  p gt                 lt  div gt                  lt div class  modal-footer  gt                   lt a href     class  btn  data-dismiss  modal  gt                    cancelButtonTxt                  lt  a gt                   lt a href     id  okButton  class  btn btn-primary  gt                    okButtonTxt                  lt  a gt                 lt  div gt               lt  div gt          confirmModal find   okButton   click function event          callback          confirmModal modal  hide                 confirmModal modal  show                    ---------------------------------------------------------- Confirm Put To Use       i deleteTransaction   live  click   function event           get txn id from current table row     var id     this  data  id         var heading    Confirm Transaction Delete       var question    Please confirm that you wish to delete transaction     id            var cancelButtonTxt    Cancel       var okButtonTxt    Confirm        var callback   function           alert  delete confirmed     id               confirm heading  question  cancelButtonTxt  okButtonTxt  callback

User · Answer

POST Recipe with navigation to target page and reusable Blade file

dfsq's answer is very nice. I modified it a bit to fit my needs: I actually needed a modal for the case that, after clicking, the user would also be navigated to the corresponding page. Executing the query asynchronously is not always what one needs.

Using Blade I created the file resources/views/includes/confirmation_modal.blade.php:

<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>{{ $headerText }}</h4>
            </div>
            <div class="modal-body">
                {{ $bodyText }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <form action="" method="POST" style="display:inline">
                    {{ method_field($verb) }}
                    {{ csrf_field() }}
                    <input type="submit" class="btn btn-danger btn-ok" value="{{ $confirmButtonText }}" />
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $('#confirmation-modal').on('show.bs.modal', function(e) {
        href = $(e.relatedTarget).data('href');

        // change href of button to corresponding target
        $(this).find('form').attr('action', href);
    });
</script>

Now, using it is straight-forward:

<a data-href="{{ route('data.destroy', ['id' => $data->id]) }}" data-toggle="modal" data-target="#confirmation-modal" class="btn btn-sm btn-danger">Remove</a>

Not much changed here and the modal can be included like this:

@include('includes.confirmation_modal', ['headerText' => 'Delete Data?', 'bodyText' => 'Do you really want to delete these data? This operation is irreversible.',
'confirmButtonText' => 'Remove Data', 'verb' => 'DELETE'])

Just by putting the verb in there, it uses it. This way, CSRF is also utilized.

Helped me, maybe it helps someone else.

User · Answer

I can easily handle this type of task using bootbox.js library. At first you need to include bootbox JS file. Then in your event handler function simply write following code:

    bootbox.confirm("Are you sure to want to delete , function(result) {

    //here result will be true
    // delete process code goes here

    });

Offical bootboxjs site

User · Answer

GET recipe  For this task you can use already available plugins and bootstrap extensions  Or you can make your own confirmation popup with just 3 lines of code  Check it out   Say we have this links  note data-href instead of href  or buttons that we want to have delete confirmation for    lt a href     data-href  delete php id 23  data-toggle  modal  data-target   confirm-delete  gt Delete record  23 lt  a gt    lt button class  btn btn-default  data-href   delete php id 54  data-toggle  modal  data-target   confirm-delete  gt      Delete record  54  lt  button gt    Here  confirm-delete points to a modal popup div in your HTML  It should have an  OK  button configured like this    lt div class  modal fade  id  confirm-delete  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                                   lt  div gt               lt div class  modal-body  gt                                   lt  div gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-default  data-dismiss  modal  gt Cancel lt  button gt                   lt a class  btn btn-danger btn-ok  gt Delete lt  a gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Now you only need this little javascript to make a delete action confirmable       confirm-delete   on  show bs modal   function e          this  find   btn-ok   attr  href     e relatedTarget  data  href           So on show bs modal event delete button href is set to URL with corresponding record id   Demo  http   plnkr co edit NePR0BQf3VmKtuMmhVR7 p preview    POST recipe  I realize that in some cases there might be needed to perform POST or DELETE request rather then GET  It it still pretty simple without too much code  Take a look at the demo below with this approach      Bind click to OK button within popup     confirm-delete   on  click     btn-ok   function e       var  modalDiv     e delegateTarget     var id     this  data  recordId        modalDiv addClass  loading        post   api record     id  then function           modalDiv modal  hide   removeClass  loading                  Bind to modal opening to set necessary data properties to be used to make request     confirm-delete   on  show bs modal   function e      var data     e relatedTarget  data          title   this  text data recordTitle         btn-ok   this  data  recordId   data recordId          x000D   x000D     Bind click to OK button within popup x000D      confirm-delete   on  click     btn-ok   function e    x000D   x000D    var  modalDiv     e delegateTarget   x000D    var id     this  data  recordId    x000D   x000D     modalDiv addClass  loading    x000D    setTimeout function     x000D       modalDiv modal  hide   removeClass  loading    x000D       1000   x000D   x000D       In reality would be something like this x000D        modalDiv addClass  loading    x000D         post   api record     id  then function     x000D          modalDiv modal  hide   removeClass  loading    x000D           x000D      x000D   x000D     Bind to modal opening to set necessary data properties to be used to make request x000D      confirm-delete   on  show bs modal   function e    x000D    var data     e relatedTarget  data    x000D        title   this  text data recordTitle   x000D        btn-ok   this  data  recordId   data recordId   x000D      x000D   modal loading  modal-content before   x000D    content   Loading      x000D    text-align  center  x000D    line-height  155px  x000D    font-size  20px  x000D    background  rgba 0  0  0   8   x000D    position  absolute  x000D    top  55px  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    color   EEE  x000D    z-index  1000  x000D    x000D   lt script data-require  jquery    data-semver  2 0 3  src    code jquery com jquery-2 0 3 min js  gt  lt  script gt  x000D   lt script data-require  bootstrap    data-semver  3 1 1  src    netdna bootstrapcdn com bootstrap 3 1 1 js bootstrap min js  gt  lt  script gt  x000D   lt link data-require  bootstrap-css 3 1 1  data-semver  3 1 1  rel  stylesheet  href    netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css    gt  x000D   x000D   lt div class  modal fade  id  confirm-delete  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt  x000D           lt h4 class  modal-title  id  myModalLabel  gt Confirm Delete lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt p gt You are about to delete  lt b gt  lt i class  title  gt  lt  i gt  lt  b gt  record  this procedure is irreversible  lt  p gt  x000D           lt p gt Do you want to proceed  lt  p gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Cancel lt  button gt  x000D           lt button type  button  class  btn btn-danger btn-ok  gt Delete lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt a href     data-record-id  23  data-record-title  The first one  data-toggle  modal  data-target   confirm-delete  gt  x000D          Delete  The first one    23 x000D       lt  a gt  x000D   lt br   gt  x000D   lt button class  btn btn-default  data-record-id  54  data-record-title  Something cool  data-toggle  modal  data-target   confirm-delete  gt  x000D    Delete  Something cool    54 x000D   lt  button gt  x000D   x000D   x000D    Demo  http   plnkr co edit V4GUuSueuuxiGr4L9LmG p preview    Bootstrap 2 3  Here is an original version of the code I made when I was answering this question for Bootstrap 2 3 modal       modal   on  show   function         var id     this  data  id            removeBtn     this  find   danger        removeBtn attr  href   removeBtn attr  href   replace    amp     ref  d      1ref     id          Demo  http   jsfiddle net MjmVr 1595

User · Answer

I d realise its a very old question  but since i wondered today for a more efficient method of handling the bootstrap modals  I did some research and found something better then the solutions which are shown above  that can be found at this link   http   www petefreitag com item 809 cfm  First load the jquery    document  ready function            a data-confirm    click function ev            var href     this  attr  href             if       dataConfirmModal   length                   body   append   lt div id  dataConfirmModal  class  modal  role  dialog  aria-labelledby  dataConfirmLabel  aria-hidden  true  gt  lt div class  modal-header  gt  lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt  lt h3 id  dataConfirmLabel  gt Please Confirm lt  h3 gt  lt  div gt  lt div class  modal-body  gt  lt  div gt  lt div class  modal-footer  gt  lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Cancel lt  button gt  lt a class  btn btn-primary  id  dataConfirmOK  gt OK lt  a gt  lt  div gt  lt  div gt                            dataConfirmModal   find   modal-body   text   this  attr  data-confirm                 dataConfirmOK   attr  href   href               dataConfirmModal   modal  show true            return false                Then just ask any question confirmation to href    lt a href   any url delete php ref ID  data-confirm  Are you sure you want to delete   gt Delete lt  a gt    This way the confirmation modal is a lot more universal and so it can easily be re-used on other parts of your website

User · Answer

Following solution is better than bootbox js  because   It can do everything bootbox js can do  The use syntax is simpler It allows you to elegantly control the color of your message using  error    warning  or  info  Bootbox is 986 lines long  mine only 110 lines long   digimango messagebox js    x000D   x000D  const dialogTemplate      x000D       lt div class   modal  id  digimango messageBox  role  dialog  gt   x000D           lt div class   modal-dialog  gt   x000D               lt div class   modal-content  gt   x000D                   lt div class   modal-body  gt   x000D                       lt p class   text-success  id  digimango messageBoxMessage  gt Some text in the modal  lt  p gt   x000D                       lt p gt  lt textarea id  digimango messageBoxTextArea  cols  70  rows  5  gt  lt  textarea gt  lt  p gt   x000D                   lt  div gt   x000D                   lt div class   modal-footer  gt   x000D                       lt button type  button  class   btn btn-primary  id  digimango messageBoxOkButton  gt OK lt  button gt   x000D                       lt button type  button  class   btn btn-default  data-dismiss  modal  id  digimango messageBoxCancelButton  gt Cancel lt  button gt   x000D                   lt  div gt   x000D               lt  div gt   x000D           lt  div gt   x000D       lt  div gt    x000D   x000D   x000D     See the comment inside function digimango onOkClick event    x000D  var digimango numOfDialogsOpened   0  x000D   x000D   x000D  function messageBox msg  significance  options  actionConfirmedCallback    x000D      if      digimango MessageBoxContainer   length    0    x000D          var iDiv   document createElement  div    x000D          iDiv id    digimango MessageBoxContainer   x000D          document getElementsByTagName  body   0  appendChild iDiv   x000D              digimango MessageBoxContainer   html dialogTemplate   x000D        x000D   x000D      var okButtonName  cancelButtonName  showTextBox  textBoxDefaultText  x000D   x000D      if  options    null    x000D          okButtonName    OK   x000D          cancelButtonName   null  x000D          showTextBox   null  x000D          textBoxDefaultText   null  x000D        else   x000D          okButtonName   options okButtonName  x000D          cancelButtonName   options cancelButtonName  x000D          showTextBox   options showTextBox  x000D          textBoxDefaultText   options textBoxDefaultText  x000D        x000D   x000D      if  showTextBox    true    x000D          if  textBoxDefaultText    null  x000D                  digimango messageBoxTextArea   val      x000D          else x000D                  digimango messageBoxTextArea   val textBoxDefaultText   x000D   x000D              digimango messageBoxTextArea   show    x000D        x000D      else x000D              digimango messageBoxTextArea   hide    x000D   x000D      if  okButtonName    null  x000D              digimango messageBoxOkButton   html okButtonName   x000D      else x000D              digimango messageBoxOkButton   html  OK    x000D   x000D      if  cancelButtonName    null  x000D              digimango messageBoxCancelButton   hide    x000D      else   x000D              digimango messageBoxCancelButton   show    x000D              digimango messageBoxCancelButton   html cancelButtonName   x000D        x000D   x000D          digimango messageBoxOkButton   unbind  click    x000D          digimango messageBoxOkButton   on  click     callback  actionConfirmedCallback    digimango onOkClick   x000D   x000D          digimango messageBoxCancelButton   unbind  click    x000D          digimango messageBoxCancelButton   on  click   digimango onCancelClick   x000D   x000D      var content       digimango messageBoxMessage    x000D   x000D      if  significance     error   x000D          content attr  class    text-danger    x000D      else if  significance     warning   x000D          content attr  class    text-warning    x000D      else x000D          content attr  class    text-success    x000D   x000D      content html msg   x000D   x000D      if  digimango numOfDialogsOpened    0  x000D              digimango messageBox   modal    x000D   x000D      digimango numOfDialogsOpened    x000D    x000D   x000D  function digimango onOkClick event    x000D         JavaScript s nature is unblocking  So the function call in the following line will not block  x000D         thus the last line of this function  which is to hide the dialog  is executed before user x000D         clicks the  OK  button on the second dialog shown in the callback  Therefore we need to count x000D         how many dialogs is currently showing  If we know there is still a dialog being shown  we do x000D         not execute the last line in this function  x000D      if  typeof  event data callback      undefined   x000D          event data callback     digimango messageBoxTextArea   val     x000D   x000D      digimango numOfDialogsOpened--  x000D   x000D      if  digimango numOfDialogsOpened    0  x000D              digimango messageBox   modal  hide    x000D    x000D   x000D  function digimango onCancelClick     x000D      digimango numOfDialogsOpened--  x000D   x000D      if  digimango numOfDialogsOpened    0  x000D              digimango messageBox   modal  hide    x000D    x000D   x000D   x000D    To use digimango messagebox js    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D       lt title gt A useful generic message box lt  title gt  x000D       lt meta http-equiv  Content-Type  content  text html charset UTF-8    gt  x000D   x000D       lt link rel  stylesheet  type  text css  href    Content bootstrap min css  media  screen    gt  x000D       lt script src    Scripts jquery-1 10 2 min js  type  text javascript  gt  lt  script gt  x000D       lt script src    Scripts bootstrap js  type  text javascript  gt  lt  script gt  x000D       lt script src    Scripts bootbox js  type  text javascript  gt  lt  script gt  x000D   x000D       lt script src    Scripts digimango messagebox js  type  text javascript  gt  lt  script gt  x000D   x000D   x000D       lt script type  text javascript  gt  x000D          function testAlert     x000D              messageBox  Something went wrong     error    x000D            x000D   x000D          function testAlertWithCallback     x000D              messageBox  Something went wrong     error   null  function      x000D                  messageBox  OK clicked     x000D                  x000D            x000D   x000D          function testConfirm     x000D              messageBox  Do you want to proceed     warning     okButtonName   Yes   cancelButtonName   No     function      x000D                  messageBox  Are you sure you want to proceed     warning     okButtonName   Yes   cancelButtonName   No      x000D                  x000D            x000D   x000D          function testPrompt     x000D              messageBox  How do you feel now     normal     showTextBox  true    function  userInput    x000D                  messageBox  User entered      userInput          x000D                  x000D            x000D   x000D          function testPromptWithDefault     x000D              messageBox  How do you feel now     normal     showTextBox  true  textBoxDefaultText   I am good      function  userInput    x000D                  messageBox  User entered      userInput          x000D                  x000D            x000D   x000D       lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D       lt a href     onclick  testAlert     gt Test alert lt  a gt   lt br  gt  x000D       lt a href     onclick  testAlertWithCallback     gt Test alert with callback lt  a gt   lt br   gt  x000D       lt a href     onclick  testConfirm     gt Test confirm lt  a gt   lt br  gt  x000D       lt a href     onclick  testPrompt     gt Test prompt lt  a gt  lt br   gt  x000D       lt a href     onclick  testPromptWithDefault     gt Test prompt with default text lt  a gt   lt br   gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can try more reusable my solution with callback function. In this function you can use POST request or some logic. Used libraries: JQuery 3> and Bootstrap 3>.

https://jsfiddle.net/axnikitenko/gazbyv8v/

Html code for test:

...
<body>
    <a href='#' id="remove-btn-a-id" class="btn btn-default">Test Remove Action</a>
</body>
...

Javascript:

$(function () {
    function remove() {
        alert('Remove Action Start!');
    }
    // Example of initializing component data
    this.cmpModalRemove = new ModalConfirmationComponent('remove-data', remove,
        'remove-btn-a-id', {
            txtModalHeader: 'Header Text For Remove', txtModalBody: 'Body For Text Remove',
            txtBtnConfirm: 'Confirm', txtBtnCancel: 'Cancel'
        });
    this.cmpModalRemove.initialize();
});

//----------------------------------------------------------------------------------------------------------------------
// COMPONENT SCRIPT
//----------------------------------------------------------------------------------------------------------------------
/**
 * Script processing data for confirmation dialog.
 * Used libraries: JQuery 3> and Bootstrap 3>.
 *
 * @param name unique component name at page scope
 * @param callback function which processing confirm click
 * @param actionBtnId button for open modal dialog
 * @param text localization data, structure:
 *              > txtModalHeader - text at header of modal dialog
 *              > txtModalBody - text at body of modal dialog
 *              > txtBtnConfirm - text at button for confirm action
 *              > txtBtnCancel - text at button for cancel action
 *
 * @constructor
 * @author Aleksey Nikitenko
 */
function ModalConfirmationComponent(name, callback, actionBtnId, text) {
    this.name = name;
    this.callback = callback;
    // Text data
    this.txtModalHeader =   text.txtModalHeader;
    this.txtModalBody =     text.txtModalBody;
    this.txtBtnConfirm =    text.txtBtnConfirm;
    this.txtBtnCancel =     text.txtBtnCancel;
    // Elements
    this.elmActionBtn = $('#' + actionBtnId);
    this.elmModalDiv = undefined;
    this.elmConfirmBtn = undefined;
}

/**
 * Initialize needed data for current component object.
 * Generate html code and assign actions for needed UI
 * elements.
 */
ModalConfirmationComponent.prototype.initialize = function () {
    // Generate modal html and assign with action button
    $('body').append(this.getHtmlModal());
    this.elmActionBtn.attr('data-toggle', 'modal');
    this.elmActionBtn.attr('data-target', '#'+this.getModalDivId());
    // Initialize needed elements
    this.elmModalDiv =  $('#'+this.getModalDivId());
    this.elmConfirmBtn = $('#'+this.getConfirmBtnId());
    // Assign click function for confirm button
    var object = this;
    this.elmConfirmBtn.click(function() {
        object.elmModalDiv.modal('toggle'); // hide modal
        object.callback(); // run callback function
    });
};

//----------------------------------------------------------------------------------------------------------------------
// HTML GENERATORS
//----------------------------------------------------------------------------------------------------------------------
/**
 * Methods needed for get html code of modal div.
 *
 * @returns {string} html code
 */
ModalConfirmationComponent.prototype.getHtmlModal = function () {
    var result = '<div class="modal fade" id="' + this.getModalDivId() + '"';
    result +=' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
    result += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
    result += this.txtModalHeader + '</div><div class="modal-body">' + this.txtModalBody + '</div>';
    result += '<div class="modal-footer">';
    result += '<button type="button" class="btn btn-default" data-dismiss="modal">';
    result += this.txtBtnCancel + '</button>';
    result += '<button id="'+this.getConfirmBtnId()+'" type="button" class="btn btn-danger">';
    result += this.txtBtnConfirm + '</button>';
    return result+'</div></div></div></div>';
};

//----------------------------------------------------------------------------------------------------------------------
// UTILITY
//----------------------------------------------------------------------------------------------------------------------
/**
 * Get id element with name prefix for this component.
 *
 * @returns {string} element id
 */
ModalConfirmationComponent.prototype.getModalDivId = function () {
    return this.name + '-modal-id';
};

/**
 * Get id element with name prefix for this component.
 *
 * @returns {string} element id
 */
ModalConfirmationComponent.prototype.getConfirmBtnId = function () {
    return this.name + '-confirm-btn-id';
};

User · Answer

I found this useful and easy to use  plus it looks pretty  http   maxailloud github io confirm-bootstrap    To use it  include the  js file in your page then run      your-link-selector   confirmModal      There are various options you can apply to it  to make it look better when doing it to confirm a delete  I use      your-link-selector   confirmModal       confirmTitle   Please confirm       confirmMessage   Are you sure you want to delete this        confirmStyle   danger       confirmOk    lt i class  icon-trash icon-white  gt  lt  i gt  Delete       confirmCallback  function  target               perform the deletion here  or leave this option            out to just follow link

User · Answer

If you want to do it in the easiest shortcut, then u can do it with this plugin.

But this plugin is an alternate implementation using Bootstrap Modal. And real Bootstrap implementation is also very easy, so I don't like to use this plugin because it adds excess JS contents in the page, which will slow down the page loading time.

Idea

I like to implement it by myself by this way-

If user clicks on a button to delete an item from the list, then a JS call will put Item ID (or any more essential data) in a form in the modal.
Then in the pop-up, there will be 2 buttons for confirmation.
- Yes will submit the form (with ajax or direct form submit)
- No will just dismiss the modal

The code will be like this (using Bootstrap)-

_x000D_

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
<script>_x000D_
$(document).ready(function()_x000D_
{_x000D_
    $("button").click(function()_x000D_
    {_x000D_
        //Say - $('p').get(0).id - this delete item id_x000D_
        $("#delete_item_id").val( $('p').get(0).id );_x000D_
        $('#delete_confirmation_modal').modal('show');_x000D_
    });_x000D_
});_x000D_
</script>_x000D_
_x000D_
<p id="1">This is a item to delete.</p>_x000D_
_x000D_
<button type="button" class="btn btn-danger">Delete</button>_x000D_
_x000D_
<!-- Delete Modal content-->_x000D_
_x000D_
<div class="modal fade" id="delete_confirmation_modal" role="dialog" style="display: none;">_x000D_
 <div class="modal-dialog" style="margin-top: 260.5px;">_x000D_
    <div class="modal-content">_x000D_
   <div class="modal-header">_x000D_
    <button type="button" class="close" data-dismiss="modal">×</button>_x000D_
    <h4 class="modal-title">Do you really want to delete this Category?</h4>_x000D_
   </div>_x000D_
   <form role="form" method="post" action="category_delete" id="delete_data">_x000D_
    <input type="hidden" id="delete_item_id" name="id" value="12">_x000D_
    <div class="modal-footer">_x000D_
     <button type="submit" class="btn btn-danger">Yes</button>_x000D_
     <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>_x000D_
    </div>_x000D_
   </form>_x000D_
  </div>_x000D_
_x000D_
 </div>_x000D_
</div>

_x000D_

You should change the form action according to your requirement.

Happy coading :)

User · Answer

http   bootboxjs com  - latest works with Bootstrap 3 0 0  The simplest possible example   bootbox alert  Hello world        From the site      The library exposes three methods designed to mimic their native JavaScript equivalents  Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults  but they are most commonly called like so    bootbox alert message  callback  bootbox prompt message  callback  bootbox confirm message  callback    Here s a snippet of it in action  click  Run code snippet  below     x000D   x000D    function     x000D    bootbox alert  Hello world     x000D      x000D   lt  -- required includes -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 2 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 2 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt  -- bootbox js at 4 4 0 -- gt  x000D   lt script src  https   rawgit com makeusabrew bootbox f3a04a57877cab071738de558581fbc91812dce9 bootbox js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Thanks to  Jousby s solution  I managed to get mine working as well  but found I had to improve his solution s Bootstrap modal markup a bit to make it render correctly as demonstrated in the official examples   So  here s my modified version of the generic confirm function that worked fine      Generic Confirm func      function confirm heading  question  cancelButtonTxt  okButtonTxt  callback         var confirmModal              lt div class  modal fade  gt                         lt div class  modal-dialog  gt                 lt div class  modal-content  gt                 lt div class  modal-header  gt                   lt a class  close  data-dismiss  modal   gt  amp times  lt  a gt                   lt h3 gt     heading    lt  h3 gt                 lt  div gt                  lt div class  modal-body  gt                   lt p gt     question     lt  p gt                 lt  div gt                  lt div class  modal-footer  gt                   lt a href      class  btn  data-dismiss  modal  gt                    cancelButtonTxt                  lt  a gt                   lt a href      id  okButton  class  btn btn-primary  gt                    okButtonTxt                  lt  a gt                 lt  div gt                 lt  div gt                 lt  div gt               lt  div gt          confirmModal find   okButton   click function event          callback          confirmModal modal  hide                  confirmModal modal  show                  END Generic Confirm func

[jquery] Confirm deletion in modal / dialog using Twitter Bootstrap?

The answer is

confirmDelete.jsp

reusingPage.jsp

POST Recipe with navigation to target page and reusable Blade file

Idea

Examples related to jquery

Examples related to twitter-bootstrap

Tags