Yocker
  1. Yocker
  3. Finestra di dialogo “conferma” personalizzata in JavaScript?
Intereting Posts
Rimuovi tutti gli attributi Perché stiamo installando gemme Ruby 1.9.2 / 1.9.3 in una cartella 1.9.1? Catturare i log del browser con Selenium WebDriver utilizzando Java Espressione regolare per numero decimale Il modo più veloce per leggere file di byte relativamente grandi in Java linq per quadro non riconosce un metodo Qual è la differenza tra lo sfondo e il colore di sfondo Memorizza le immagini in un database MongoDB Come recuperare il primo e l’ultimo record di un record raggruppato in una query MySQL con funzioni aggregate? PhoneGap: apertura di URL esterni in Safari Capire il conteggio dei riferimenti con Cocoa e Objective-C Percorso con due parametri opzionali in MVC3 non funzionanti Rilevazione della connessione Internet di iPhone SDK Case insensitive std :: string.find () Come posso determinare se l’iPhone è impostato per 12 ore o 24 ore di visualizzazione dell’ora?

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 = '
' + '
' + '
' + '' + '
' + '
' + 'OK' + '' + '
' + '
' + '
' + '
'; 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