Custom confirm dialog in JavaScript

Question

I ve been working on an ASP net project that uses custom  modal dialogs    I use scare quotes here because I understand that the  modal dialog  is simply a div in my html document that is set to appear  on top  of the rest of the document and is not a modal dialog in the true sense of the word   In many parts of the web site  I have code that looks like this   var warning    Are you sure you want to do this    if  confirm warning            Do something   else          Do something else     This is okay  but it would be nice to make the confirm dialog match the style of the rest of the page   However  since it is not a true modal dialog  I think that I need to write something like this   I use jQuery-UI in this example    lt div id  modal dialog  gt       lt div class  title  gt       lt  div gt       lt input type  button  value  yes  id  btnYes    gt       lt input type  button  value  no  id  btnNo    gt   lt  div gt    lt script gt  function DoSomethingDangerous         var warning    Are you sure you want to do this            title   html warning       var dialog       modal dialog   dialog        function Yes             dialog dialog  close               Do something              function No             dialog dialog  close               Do something else                   btnYes   click Yes           btnNo   click No         Is this a good way to accomplish what I want  or is there a better way

User · Answer

I would use the example given on jQuery UI s site as a template        modal dialog    dialog       resizable  false      height 140      modal  true      buttons                     Yes   function                            this   dialog   close                                           No   function                            this   dialog   close

User · Answer

Faced with the same problem  I was able to solve it using only vanilla JS  but in an ugly way   To be more accurate  in a non-procedural way   I removed all my function parameters and return values and replaced them with global variables  and now the functions only serve as containers for lines of code - they re no longer logical units   In my case  I also had the added complication of needing many confirmations  as a parser works through a text    My solution was to put everything up to the first confirmation in a JS function that ends by painting my custom popup on the screen  and then terminating   Then the buttons in my popup call another function that uses the answer and then continues working  parsing  as usual up to the next confirmation  when it again paints the screen and then terminates   This second function is called as often as needed   Both functions also recognize when the work is done - they do a little cleanup and then finish for good   The result is that I have complete control of the popups  the price I paid is in elegance

User · Answer

x000D   x000D  var confirmBox     lt div class  modal fade confirm-modal  gt     x000D        lt div class  modal-dialog modal-sm  role  document  gt     x000D        lt div class  modal-content  gt     x000D        lt button type  button  class  close m-4 c-pointer  data-dismiss  modal  aria-label  Close  gt     x000D        lt span aria-hidden  true  gt  amp times  lt  span gt     x000D        lt  button gt     x000D        lt div class  modal-body pb-5  gt  lt  div gt     x000D        lt div class  modal-footer pt-3 pb-3  gt     x000D        lt a href     class  btn btn-primary yesBtn btn-sm  gt OK lt  a gt     x000D        lt button type  button  class  btn btn-secondary abortBtn btn-sm  data-dismiss  modal  gt Abbrechen lt  button gt     x000D        lt  div gt     x000D        lt  div gt     x000D        lt  div gt     x000D        lt  div gt    x000D   x000D  var dialog   function el  text  trueCallback  abortCallback    x000D   x000D      el click function e    x000D   x000D          var thisConfirm     confirmBox  clone    x000D   x000D          thisConfirm find   modal-body   text text   x000D   x000D          e preventDefault    x000D             body   append thisConfirm   x000D            thisConfirm  modal  show    x000D   x000D          if  abortCallback    x000D                thisConfirm  find   abortBtn   click function e    x000D                  e preventDefault    x000D                  abortCallback    x000D                    thisConfirm  modal  hide    x000D                  x000D            x000D   x000D          if  trueCallback    x000D                thisConfirm  find   yesBtn   click function e    x000D                  e preventDefault    x000D                  trueCallback    x000D                    thisConfirm  modal  hide    x000D                  x000D            else   x000D   x000D              if  el prop  nodeName       A     x000D                    thisConfirm  find   yesBtn   attr  href   el attr  href     x000D                x000D   x000D              if  el attr  type       submit     x000D                    thisConfirm  find   yesBtn   click function e    x000D                      e preventDefault    x000D                      el off   click    x000D                      x000D                x000D            x000D   x000D            thisConfirm  on  hidden bs modal   function e    x000D                this  remove    x000D              x000D   x000D          x000D    x000D   x000D     custom confirm x000D    function     x000D          data-confirm    each function     x000D          dialog   this     this  attr  data-confirm     x000D          x000D   x000D      dialog     customCallback     dialog with custom callback   function     x000D   x000D          alert  hi there    x000D   x000D          x000D   x000D      x000D   test   x000D    display block  x000D    padding  5p 10px  x000D    background orange  x000D    color white  x000D    border-radius 4px  x000D    margin 0  x000D    border 0  x000D    width 150px  x000D    text-align center  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   x000D  example 1 x000D   lt a class  test  href  http   example  data-confirm  do you want really leave the website   gt leave website lt  a gt  lt br gt  lt br gt  x000D   x000D   x000D  example 2 x000D   lt form action    gt  x000D   lt button class  test  type  submit  data-confirm  send form to delete some files   gt delete some files lt  button gt  x000D   lt  form gt  lt br gt  lt br gt  x000D   x000D  example 3 x000D   lt span class  test   id  customCallback  gt with callback lt  span gt  x000D   x000D   x000D

User · Answer

To enable you to use the confirm box like the normal confirm dialog  I would use Promises which will enable you to await on the result of the outcome and then act on this  rather than having to use callbacks   This will allow you to follow the same pattern you have in other parts of your code with code such as       const confirm   await ui confirm  Are you sure you want to do this        if confirm       alert  yes clicked        else      alert  no clicked          See codepen for example  or run the snippet below   https   codepen io larnott pen rNNQoNp     x000D   x000D  const ui     x000D    confirm  async  message    gt  createConfirm message  x000D    x000D   x000D  const createConfirm    message    gt    x000D    return new Promise  complete  failed   gt   x000D          confirmMessage   text message  x000D   x000D          confirmYes   off  click    x000D          confirmNo   off  click    x000D       x000D          confirmYes   on  click       gt        confirm   hide    complete true       x000D          confirmNo   on  click       gt        confirm   hide    complete false       x000D       x000D          confirm   show    x000D        x000D    x000D                        x000D  const saveForm   async      gt    x000D    const confirm   await ui confirm  Are you sure you want to do this     x000D     x000D    if confirm   x000D      alert  yes clicked    x000D      else  x000D      alert  no clicked    x000D      x000D    x000D  body   x000D    margin  0px  x000D    font-family   Arial   x000D    x000D   x000D   example   x000D    padding  20px  x000D    x000D   x000D  input type button    x000D    padding  5px 10px  x000D    margin  10px 5px  x000D    border-radius  5px  x000D    cursor  pointer  x000D    background   ddd  x000D    border  1px solid  ccc  x000D    x000D  input type button  hover   x000D    background   ccc  x000D    x000D   x000D   confirm   x000D    display  none  x000D    x000D   confirm  gt  div first-of-type   x000D    position  fixed  x000D    width  100   x000D    height  100   x000D    background  rgba 0  0  0  0 5   x000D    top  0px  x000D    left  0px  x000D    x000D   confirm  gt  div last-of-type   x000D    padding  10px 20px  x000D    background  white  x000D    position  absolute  x000D    width  auto  x000D    height  auto  x000D    left  50   x000D    top  50   x000D    transform  translate -50   -50    x000D    border-radius  5px  x000D    border  1px solid  333  x000D    x000D   confirm  gt  div last-of-type div first-of-type   x000D    min-width  150px  x000D    padding  10px  x000D    x000D   confirm  gt  div last-of-type div last-of-type   x000D    text-align  right  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  example  gt  x000D     lt input type  button  onclick  saveForm    value  Save    gt  x000D   lt  div gt  x000D   x000D   lt  -- Hidden confirm markup somewhere at the bottom of page -- gt  x000D   x000D   lt div class  confirm  gt  x000D     lt div gt  lt  div gt  x000D     lt div gt  x000D       lt div id  confirmMessage  gt  lt  div gt  x000D       lt div gt  x000D         lt input id  confirmYes  type  button  value  Yes    gt  x000D         lt input id  confirmNo  type  button  value  No    gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You might want to consider abstracting it out into a function like this   function dialog message  yesCallback  noCallback            title   html message       var dialog       modal dialog   dialog             btnYes   click function             dialog dialog  close            yesCallback                    btnNo   click function             dialog dialog  close            noCallback                You can then use it like this   dialog  Are you sure you want to do this        function                Do something            function                Do something else

User · Answer

I managed to find the solution that will allow you to do this using default confirm   with minimum of changes if you have a lot of confirm   actions through out you code  This example uses jQuery and Bootstrap but the same thing can be accomplished using other libraries as well  You can just copy paste this and it should work right away  lt  DOCTYPE html gt   lt html lang  quot en quot  gt   lt head gt       lt meta charset  quot utf-8 quot  gt       lt title gt Project Title lt  title gt       lt meta http-equiv  quot X-UA-Compatible quot  content  quot IE edge quot  gt       lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 quot  gt        lt link href  quot https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 6 css bootstrap min css quot  rel  quot stylesheet quot  gt       lt script src  quot https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js quot  gt  lt  script gt        lt  -- if lt IE 9  gt           lt script src  quot https   cdnjs cloudflare com ajax libs html5shiv 3 7 3 html5shiv min js quot  gt  lt  script gt           lt script src  quot https   oss maxcdn com respond 1 4 2 respond min js quot  gt  lt  script gt       lt   endif -- gt   lt  head gt   lt body gt   lt div class  quot container quot  gt       lt h1 gt Custom Confirm lt  h1 gt       lt button id  quot action quot  gt  Action  lt  button gt        lt button class  another-one  gt  Another  lt  button gt   lt  div gt   lt script src  quot https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 6 js bootstrap min js quot  gt  lt  script gt    lt script type  quot text javascript quot  gt       document body innerHTML      lt div class  quot modal fade quot   style  quot top 20vh quot  id  quot customDialog quot  tabindex  quot -1 quot  role  quot dialog quot  aria-labelledby  quot exampleModalLabel quot  aria-hidden  quot true quot  gt       lt div class  quot modal-dialog quot  role  quot document quot  gt       lt div class  quot modal-content quot  gt       lt div class  quot modal-header quot  gt       lt h5 class  quot modal-title quot  id  quot exampleModalLabel quot  gt Modal title lt  h5 gt       lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-label  quot Close quot  gt       lt span aria-hidden  quot true quot  gt  amp times  lt  span gt       lt  button gt       lt  div gt       lt div class  quot modal-body quot  gt        lt  div gt       lt div class  quot modal-footer quot  gt       lt button type  quot button quot  id  dialog-cancel  class  quot btn btn-secondary quot  gt Cancel lt  button gt       lt button type  quot button quot  id  dialog-ok  class  quot btn btn-primary quot  gt Ok lt  button gt       lt  div gt       lt  div gt       lt  div gt       lt  div gt         function showModal text                 customDialog  modal-body   html text               customDialog   modal  show                function startInterval element              interval   setInterval function                if   window isConfirmed    null                    window confirm   function                        return window isConfirmed                                 elConfrimInit trigger  click                   clearInterval interval                 window isConfirmed   null                window confirm   function text                    showModal text                   startInterval                                            500               window isConfirmed   null      window confirm   function text elem   null            elConfrimInit   elem          showModal text           startInterval                 document  on  click    dialog-ok   function             isConfirmed   true              customDialog   modal  hide                    document  on  click    dialog-cancel   function             isConfirmed   false              customDialog   modal  hide                    action   on  click   function e                if   confirm  Are you sure     this                    alert  confrmed                      else               alert  not confimed                               another-one   on  click   function e              if   confirm  Are really  really  really sure   you sure     this                    alert  confirmed                      else               alert  not confimed                         lt  script gt   lt  body gt   lt  html gt   This is the whole example  After you implement it you will be able to use it like this   if   confirm  Are you sure     this

User · Answer

One other way would be using colorbox  function createConfirm message  okHandler        var confirm     lt p id  confirmMessage  gt   message   lt  p gt  lt div class  clearfix dropbig  gt                  lt input type  button  id  confirmYes  class  alignleft ui-button ui-widget ui-state-default  value  Yes    gt                   lt input type  button  id  confirmNo  class  ui-button ui-widget ui-state-default  value  No    gt  lt  div gt           fn colorbox  html confirm           onComplete  function                    confirmYes   click function                    okHandler                      fn colorbox close                                    confirmNo   click function                      fn colorbox close

User · Answer

SweetAlert  You should take a look at SweetAlert as an option to save some work  It s beautiful from the default state and is highly customizable    Confirm Example  sweetAlert          title   Are you sure        text   You will not be able to recover this imaginary file        type   warning          showCancelButton  true         confirmButtonColor    DD6B55       confirmButtonText   Yes  delete it           deleteIt

[javascript] Custom "confirm" dialog in JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

[javascript] Custom "confirm" dialog in JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

Examples related to modal-dialog