JavaScript中的自定义“确认”对话框？

我一直在研究一个使用自定义“modal dialog”的ASP.net项目。 我在这里使用吓唬引用，因为我知道’模态对话’只是我的html文档中的一个div，设置为显示在文档其余部分的“顶部”，而不是真正意义上的modal dialog。

在网站的许多部分，我的代码如下所示：

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

这没关系，但是让确认对话框与页面其余部分的样式相匹配会很不错。

但是，由于它不是真正的modal dialog，我认为我需要写这样的东西:(在这个例子中我使用jQuery-UI）

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

这是实现我想要的好方法，还是有更好的方法？

Answer 1

您可能需要考虑将其抽象为如下函数：

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

然后你可以像这样使用它：

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

Answer 2

SweetAlert

您应该看看SweetAlert作为保存一些工作的选项。 它在默认状态下很漂亮，并且可以高度自定义。

确认示例

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

Answer 3

我会使用jQuery UI网站上给出的示例作为模板：

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

Answer 4

另一种方法是使用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(); }); }}); } 

Answer 5

 var confirmBox = '
' + '
' + '
' + '' + '×' + '' + '
' + '
' + 'OK' + 'Abbrechen' + '
' + '
' + '
' + '
'; 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 
 delete some files 


 example 3 with callback