Question

我的网站上有一些链接需要在用户点击其中一个时显示模式对话框。模态将包含如下消息：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！另外我如何获得第一个按钮将它们发送到原始目的地？

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

Answer 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生成链接，在我的示例中）。