jQuery UI：显示用户必须确认或取消的对话框答案

【问题标题】：jQuery UI: Show dialog that user must confirm or canceljQuery UI：显示用户必须确认或取消的对话框
【发布时间】：2011-08-02 17:39:02
【问题描述】：

我的网站上有一些链接需要在用户单击其中一个时显示模式对话框。模态将包含如下消息：You are now leaving the "SECTION NAME" part of "SITE NAME"。然后，用户要么接受允许用户继续他们的请求，要么接受取消，这将使用户保持原状。

链接示例如下：<a href="/interests" title="My Interests" target="_blank" class="leaving-section">My Interests</a>

所以你可以看到leaving-section 的类会导致链接执行我上面指定的操作，并且还会在新选项卡/窗口中打开链接但是用户必须首先接受他们知道他们是被带到网站的另一部分。

我查看了文档，但没有看到任何示例：a）对话框是即时创建的，而不是隐藏和显示 div 和 b）允许用户确认并被发送到他们的原始位置，即他们点击的网址。

这是我目前所拥有的：

$("#leaving-section").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "I understand, take me there": function () {
                    $(this).dialog("close");
                },
                "I want to stay where I am": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('.leaving-section').click(function (event)
        {
            event.preventDefault();
            var $dialog = $('#leaving-section');
            $dialog.dialog('open');
        });

但我希望通过 jquery 创建模态，而不是嵌入页面中的 div！另外，我如何获得第一个按钮将它们发送到原来的目的地？

感谢所有可以提供帮助的人。谢谢

【问题讨论】：

我如何让对话框允许用户接受并被发送到原始 url 或取消并留在原处。
取消很容易，因为您可以在模态中定义它。虽然转到一个 url，你也可以定义它，但你会使用类似 window.location 或 location.href

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

我只需要解决同样的问题。让它工作的关键是dialog 必须在click 事件处理程序中为要使用确认功能的链接部分初始化（如果你想将其用于多个链接）。这是因为必须将链接的目标 URL 注入到确认按钮单击的事件处理程序中。我使用了一个 CSS 类来指示哪些链接应该具有确认行为。

这是我的解决方案，抽象出来以适合示例。

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

如果您可以使用 CSS 类（confirmLink，在我的示例中）生成链接，我相信这对您有用。

【讨论】：

【解决方案2】：

我认为这个插件可能会有所帮助

http://jqueryui.com/demos/dialog/#modal-confirmation

【讨论】：