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

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 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

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        lt body gt       lt a href     id  remove-btn-a-id  class  btn btn-default  gt Test Remove Action lt  a gt   lt  body gt        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 gt  and Bootstrap 3 gt          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                   gt  txtModalHeader - text at header of modal dialog                  gt  txtModalBody - text at body of modal dialog                  gt  txtBtnConfirm - text at button for confirm action                  gt  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     lt div class  modal fade  id      this getModalDivId              result     tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt        result      lt div class  modal-dialog  gt  lt div class  modal-content  gt  lt div class  modal-header  gt        result    this txtModalHeader     lt  div gt  lt div class  modal-body  gt     this txtModalBody     lt  div gt        result      lt div class  modal-footer  gt        result      lt button type  button  class  btn btn-default  data-dismiss  modal  gt        result    this txtBtnCancel     lt  button gt        result      lt button id    this getConfirmBtnId      type  button  class  btn btn-danger  gt        result    this txtBtnConfirm     lt  button gt        return result   lt  div gt  lt  div gt  lt  div gt  lt  div gt          ----------------------------------------------------------------------------------------------------------------------    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

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

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   lt  -- Modal Dialog -- gt   lt div class  modal fade  id  confirmDelete  role  dialog  aria-labelledby  confirmDeleteLabel   aria-hidden  true  gt   lt div class  modal-dialog  gt       lt div class  modal-content  gt           lt div class  modal-header  gt               lt button type  button  class  close  data-dismiss  modal                      aria-hidden  true  gt  amp times  lt  button gt               lt h4 class  modal-title  gt Delete Parmanently lt  h4 gt           lt  div gt           lt div class  modal-body  style  height  75px  gt               lt p gt Are you sure about this   lt  p 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 button type  button  class  btn btn-danger  id  confirm-delete-ok  gt Ok              lt  button gt           lt  div gt       lt  div gt   lt  div gt       lt script type  text javascript  gt       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                 lt  -- Form confirm  yes ok  handler  submits form -- gt      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       lt script  gt    reusingPage jsp   lt 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  gt   lt  a gt   lt  -- jQuery should come before this -- gt   lt    include file     some path confirmDelete jsp    gt    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

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   x000D   lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D     lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt script gt  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   lt  script gt  x000D   x000D   lt p id  1  gt This is a item to delete  lt  p gt  x000D   x000D   lt button type  button  class  btn btn-danger  gt Delete lt  button gt  x000D   x000D   lt  -- Delete Modal content-- gt  x000D   x000D   lt div class  modal fade  id  delete confirmation modal  role  dialog  style  display  none   gt  x000D    lt div class  modal-dialog  style  margin-top  260 5px   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  gt    lt  button gt  x000D       lt h4 class  modal-title  gt Do you really want to delete this Category  lt  h4 gt  x000D      lt  div gt  x000D      lt form role  form  method  post  action  category delete  id  delete data  gt  x000D       lt input type  hidden  id  delete item id  name  id  value  12  gt  x000D       lt div class  modal-footer  gt  x000D        lt button type  submit  class  btn btn-danger  gt Yes lt  button gt  x000D        lt button type  button  class  btn btn-primary  data-dismiss  modal  gt No lt  button gt  x000D       lt  div gt  x000D      lt  form gt  x000D     lt  div gt  x000D   x000D    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You should change the form action according to your requirement   Happy coading

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    lt div class  modal fade  id  confirmation-modal  tabindex  -1  role  dialog  aria-labelledby  confirmation-modal-label  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt h4 gt     headerText    lt  h4 gt               lt  div gt               lt div class  modal-body  gt                      bodyText                 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 form action    method  POST  style  display inline  gt                         method field  verb                            csrf field                           lt input type  submit  class  btn btn-danger btn-ok  value      confirmButtonText       gt                   lt  form gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    lt script gt          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            lt  script gt    Now  using it is straight-forward    lt a data-href     route  data destroy     id    gt   data- gt id       data-toggle  modal  data-target   confirmation-modal  class  btn btn-sm btn-danger  gt Remove lt  a gt    Not much changed here and the modal can be included like this    include  includes confirmation modal     headerText    gt   Delete Data     bodyText    gt   Do you really want to delete these data  This operation is irreversible     confirmButtonText    gt   Remove Data    verb    gt   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

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

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

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

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

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

Examples related to jquery

Examples related to twitter-bootstrap