Finestra di dialogo “conferma” personalizzata in JavaScript?

Ho lavorato su un progetto ASP.net che utilizza “windows di dialogo modali” personalizzate. Uso qui virgolette di intimidazione perché capisco che la ‘finestra di dialogo modale’ è semplicemente una div nel mio documento html che è impostato per apparire “in cima” al resto del documento e non è una finestra di dialogo modale nel vero senso della parola .

In molte parti del sito Web, ho un codice simile a questo:

var warning = 'Are you sure you want to do this?'; if (confirm(warning)) { // Do something } else { // Do something else } 

Va bene, ma sarebbe bello fare in modo che la finestra di conferma corrisponda allo stile del resto della pagina.

Tuttavia, dal momento che non è una vera finestra di dialogo modale, penso che ho bisogno di scrivere qualcosa del genere: (Io uso jQuery-UI in questo esempio)

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

È un buon modo per realizzare ciò che voglio, o c’è un modo migliore?

Potresti voler considerare l’astrazione in una funzione come questa:

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

Puoi quindi usarlo in questo modo:

 dialog('Are you sure you want to do this?', function() { // Do something }, function() { // Do something else } ); 

SweetAlert

Dovresti dare un’occhiata a SweetAlert come opzione per risparmiare un po ‘di lavoro. È bello dallo stato predefinito ed è altamente personalizzabile.

Conferma l’esempio

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

Avviso di esempio

Vorrei usare l’esempio dato sul sito di jQuery UI come modello:

 $( "#modal_dialog" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Yes": function() { $( this ).dialog( "close" ); }, "No": function() { $( this ).dialog( "close" ); } } }); 

Un altro modo sarebbe usare Colorbox

 function createConfirm(message, okHandler) { var confirm = '

'+message+'

'+ '' + '
'; $.fn.colorbox({html:confirm, onComplete: function(){ $("#confirmYes").click(function(){ okHandler(); $.fn.colorbox.close(); }); $("#confirmNo").click(function(){ $.fn.colorbox.close(); }); }}); }
 var confirmBox = ''; var dialog = function(el, text, trueCallback, abortCallback) { el.click(function(e) { var thisConfirm = $(confirmBox).clone(); thisConfirm.find('.modal-body').text(text); e.preventDefault(); $('body').append(thisConfirm); $(thisConfirm).modal('show'); if (abortCallback) { $(thisConfirm).find('.abortBtn').click(function(e) { e.preventDefault(); abortCallback(); $(thisConfirm).modal('hide'); }); } if (trueCallback) { $(thisConfirm).find('.yesBtn').click(function(e) { e.preventDefault(); trueCallback(); $(thisConfirm).modal('hide'); }); } else { if (el.prop('nodeName') == 'A') { $(thisConfirm).find('.yesBtn').attr('href', el.attr('href')); } if (el.attr('type') == 'submit') { $(thisConfirm).find('.yesBtn').click(function(e) { e.preventDefault(); el.off().click(); }); } } $(thisConfirm).on('hidden.bs.modal', function(e) { $(this).remove(); }); }); } // custom confirm $(function() { $('[data-confirm]').each(function() { dialog($(this), $(this).attr('data-confirm')); }); dialog($('#customCallback'), "dialog with custom callback", function() { alert("hi there"); }); }); 
 .test { display:block; padding: 5p 10px; background:orange; color:white; border-radius:4px; margin:0; border:0; width:150px; text-align:center; } 
    example 1 leave website

example 2


example 3 with callback