Confirm deletion using Bootstrap 3 modal box

Question

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>

User · Answer

Create modal dialog in HTML with id  confirmation  and use function showConfirmation   Also remember you should to unbind  modal unbind    cancel and success buttons after hide modal dialog  If you do not make this you will get double binding  For example  if you open dialog once and press  Cancel  and then open dialog in second time and press  Ok  you will get 2 executions of success callback   showConfirmation   function title  message  success  cancel        title   title   title    Are you sure        var modal       confirmation        modal find   modal-title   html title  end            find   modal-body   html message  end            modal   backdrop   static   keyboard  false             on  hidden bs modal   function                  modal unbind                    if  success            modal one  click     modal-footer  btn-primary   success             if  cancel            modal one  click     modal-header  close   modal-footer  btn-default   cancel                bind confirmation dialog on delete buttons   document  on  click     delete-event   delete-all-event   function event       event preventDefault        var self     this       var url     this  data  url        var success   function            alert  window location href url              var cancel   function            alert  Cancel               if  self data  confirmation              var title   self data  confirmation-title     self data  confirmation-title     undefined          var message   self data  confirmation            showConfirmation title  message  success  cancel         else           success                https   jsfiddle net yiiBoy hne9sp6g

User · Answer

lt  -- Button trigger modal -- gt   lt button type  button  class  btn btn-primary  data-toggle  modal  data-target   exampleModal  gt    Launch demo modal  lt  button gt    lt  -- Modal -- gt   lt div class  modal fade  id  exampleModal  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt     lt div class  modal-dialog  role  document  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt             lt span aria-hidden  true  gt  amp times  lt  span gt           lt  button 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-secondary  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    https   getbootstrap com docs 4 0 components modal

User · Answer

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

User · Answer

simple way to use modals is with eModal   Ex from github    Link to eModal js  lt script src    rawgit com saribe eModal master dist eModal min js  gt  lt  script gt     x000D   x000D      var options     x000D              message   The famouse question    x000D              title   Header title   x000D              size   sm   x000D              callback  function result    result   doActionTrue result       doActionFalse       x000D              subtitle   smaller text header   x000D              label   True       use the possitive lable as key x000D                    x000D             x000D                        x000D      eModal confirm options   x000D    lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 1 js bootstrap min js  gt  lt  script gt  x000D   lt script src    rawgit com saribe eModal master dist eModal min js  gt  lt  script gt  x000D   x000D   x000D    Tip  You can use change the default label name    label   Yes     True    OK

User · Answer

I ve the same problem just today  This is my solution  which I think is better and simpler     lt  -- Modal dialog -- gt   lt div class  modal fade  id  frmPrenotazione  tabindex  -1  gt       lt  -- CUTTED -- gt       lt div id  step1  class  modal-footer  gt         lt button type  button  class  glyphicon glyphicon-erase btn btn-default  id  btnDelete  gt  Delete lt  button gt       lt  div gt   lt  div gt    lt  -- Modal confirm -- gt   lt div class  modal  id  confirmModal  style  display  none  z-index  1050   gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-body  id  confirmMessage  gt               lt  div gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-default  id  confirmOk  gt Ok lt  button gt                   lt button type  button  class  btn btn-default  id  confirmCancel  gt Cancel lt  button gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    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    x000D   x000D  var YOUR MESSAGE STRING CONST    Your confirm message    x000D            btnDelete   on  click   function e   x000D        confirmDialog YOUR MESSAGE STRING CONST  function    x000D           My code to delete x000D            console log  deleted     x000D            x000D           x000D   x000D          function confirmDialog message  onConfirm   x000D           var fClose   function    x000D           modal modal  hide    x000D              x000D           var modal       confirmModal    x000D           modal modal  show    x000D               confirmMessage   empty   append message   x000D               confirmOk   unbind   one  click   onConfirm  one  click   fClose   x000D               confirmCancel   unbind   one  click   fClose   x000D            x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt  -- Modal dialog -- gt  x000D   lt div id  frmTest  tabindex  -1  gt  x000D       lt  -- CUTTED -- gt  x000D         lt div id  step1  class  modal-footer  gt  x000D       lt button type  button  class  glyphicon glyphicon-erase btn btn-default  id  btnDelete  gt  Delete lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D     lt  -- Modal confirm -- gt  x000D   lt div class  modal  id  confirmModal  style  display  none  z-index  1050   gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-body  id  confirmMessage  gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  id  confirmOk  gt Ok lt  button gt  x000D               lt button type  button  class  btn btn-default  id  confirmCancel  gt Cancel lt  button gt  x000D             lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

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

launchConfirm   on  click   function  e            confirm            modal   backdrop   static   keyboard  false             one  click     delete   function  e                  delete function                   FIDDLE  For your button    lt button class  btn btn-danger btn-xs launchConfirm  type  button  name  remove levels  gt  lt span class  fa fa-times  gt  lt  span gt  delete lt  button gt  lt  td gt

User · Answer

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    x000D   x000D      x000D   x000D      button name  remove levels     on  click   function e    x000D        var  form     this  closest  form    x000D        e preventDefault    x000D            confirm   modal   x000D            backdrop   static   x000D            keyboard  false x000D           x000D         on  click     delete   function e    x000D             form trigger  submit    x000D              x000D            cancel   on  click  function e   x000D         e preventDefault    x000D             confirm   modal model  hide    x000D            x000D          x000D   lt link href  http   getbootstrap com 2 3 2 assets css bootstrap css  rel  stylesheet    gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   getbootstrap com 2 3 2 assets js bootstrap js  gt  lt  script gt  x000D   lt form action     method  POST  gt  x000D     lt button class  btn btn-danger btn-xs  type  submit  name  remove levels  value  delete  gt  lt span class  fa fa-times  gt  lt  span gt  delete lt  button gt  x000D   lt  form gt  x000D   x000D   lt div id  confirm  class  modal  gt  x000D     lt div class  modal-body  gt  x000D      Are you sure  x000D     lt  div gt  x000D     lt div class  modal-footer  gt  x000D       lt button type  button  data-dismiss  modal  class  btn btn-primary  id  delete  gt Delete lt  button gt  x000D       lt button type  button  data-dismiss  modal  class  btn  gt Cancel lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[jquery] Confirm deletion using Bootstrap 3 modal box

The answer is

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to confirm

Tags