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)

<div id='modal_dialog'>     <div class='title'>     </div>     <input type='button' value='yes' id='btnYes' />     <input type='button' value='no' id='btnNo' /> </div>  <script> 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?

Answer 1

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     } ); 

Answer 2

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() );