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

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)允许用户确认并发送到其原始位置,即url他们点击了.

这是我到目前为止:

$("#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在我的例子中).