jQueryUI对话框替换确认？答案

【问题标题】：jQueryUI dialog replacement for confirm?jQueryUI对话框替换确认？
【发布时间】：2016-08-02 23:10:09
【问题描述】：

我正在尝试使用 jQueryUI 对话框覆盖默认确认框，这是我的尝试：

window.confirm = function (message_confirm) {
        $(document.createElement('div'))
            .attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' })
            .html(message_confirm)
            .dialog({
                buttons: { YES: function () { return true; }, NO: function () { $(this).dialog('close'); } },
                close: function () { $(this).remove(); },
                draggable: true,
                modal: true,
                resizable: false,
                width: 'auto',
                hide: { effect: "fade", duration: 300 },

            });

    };

这是因为一旦运行此脚本，调用常规 confirm 会显示 jQueryUI 对话框，但是 YES 选择不起作用。我有一个如下所示的 ajax 调用：

if (confirm("Are you sure you want to delete this user?"))
{
      alert("test");
     //ajax call
}
return false;

并且没有出现测试警报。对话框的 NO 选项工作正常。我怎样才能让 YES 起作用？

谢谢。

【问题讨论】：

有什么错误吗？尝试使用 console.log 而不是警报？ console.log 是否在“YES:”函数中工作（替换为 return true;）？
@ggzone 没有错误。将return true 替换为console.log("dialog yes clicked")，当我单击“是”时，它正确显示在控制台上。代替警报的 console.log 也没有出现（与原始警报测试的行为相同）。
好吧，那你需要一个回调函数。已经有一个很好的答案如何做到这一点

标签： javascript jquery html jquery-ui

【解决方案1】：

你可以给函数添加一个回调参数

window.confirm = function (message_confirm, ok_callback)

“是”就开火

 buttons: { YES: function () { ok_callback(); }}

然后继续像

confirm("message", function(){
    alert('smth');
});

【讨论】：

这行得通，但是在我单击“是”并执行操作后，对话框仍然停留在那里。感谢您的帮助。

【解决方案2】：

由于对话框是异步的，您可以使用延迟方法：

window.confirm = function (message_confirm) {
  var defer = $.Deferred();
  $('<div/>', {title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm})
  .dialog({
    buttons: {
      YES: function () {
        defer.resolve("yes");
        $(this).attr('yesno', true);
        $(this).dialog('close');
      }, NO: function () {
        defer.resolve("no");
        $(this).attr('yesno', false);
        $(this).dialog('close');
      }
    },
    close: function () {
      if ($(this).attr('yesno') === undefined) {
          defer.resolve("no");
      }
      $(this).remove();
    },
    draggable: true,
    modal: true,
    resizable: false,
    width: 'auto',
    hide: {effect: "fade", duration: 300}
  });
  return defer.promise();
};

$(function () {
  confirm("Are you sure you want to delete this user?").then(function(yesno) {
    console.log(yesno);
  });
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

【讨论】：

这有效，并且在执行操作后对话框关闭。我在检查yesno 后执行了该操作。非常感谢。
@ITWorker Snippet 更新：我添加了 $(this).attr('yesno', true);或 false，我在关闭对话框之前对此进行了测试。这样，如果您在任何情况下使用 ESC 或 X 关闭对话框，都会执行解析延迟操作并执行 then 部分。

【解决方案3】：

试试下面的方法。它对我有用。

 <script>
  $( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete user": function() {
          alert("test");
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
  </script>
</head>
<body>

<div id="dialog-confirm" title="Please confirm">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>

【讨论】：

我没有尝试过，但感谢您的回复。我尝试使用它，以便可以在整个应用程序中替换确认，这将允许我对 Yes 使用不同的行为，而不是每次都在对话框中定义它。