Question

我想要做的是，在您点击链接之前，您将访问其他网页，我想将灯箱添加到所有“'添加'类”链接，这将告知您离开此页面。在那个灯箱中，我希望看到你刚刚用来打开这个灯箱的链接。

到目前为止我所取得的成就是让灯箱出现，但是它会从页面中删除孔链接并将其粘贴到灯箱中，如果你想点击该链接没有发生任何事情，因为它试图打开那个灯箱再次。

HTML：

<div class="add"><a href="http://www.jsfiddle.net/" id="add_btn" target="_blank" rel="nofollow" class="btn">Add</a></div>

代码：

$(".add").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad   : function() {

this.inner.prepend( '<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit, mi sed sollicitudin hendrerit, elit elit tristique velit</h4>' );

this.add = '<a href="' + this.href + '"></a>' 
    }
});

演示：http://jsfiddle.net/2pyAP/

Answer 1

如果我理解正确，你想要的是：

点击页面“A”中指向网页“B”的链接
而不是转到页面“B”，在离开页面“A”
如果访客说“是”，则进入页面“B”，否则关闭灯箱并留在页面“A”

如果以上所有都是正确的，那么我会在一个变量中设置fancybox的确认内容，如：

var confirm = "<div class='confirm'>" +
    "<p>You are about to leave this page.</p>" +
    "<p>Are you sure you want to do that?</p><br />" +
    "<a href='#' class='button yes'>Yes</a>" +
    "<a href='#' class='button no'>no</a>" +
    "</div>";

然后使用href回调捕获另一个变量中所点击链接的afterLoad属性的值。

然后在click回调中将.button绑定到confirm选择器（如上所述的afterShow变量中）并决定要采取的操作：

到了页面“B”
关闭fancybox并留在页面“A”

假设您有这样的链接：

<a href="http://www.jsfiddle.net/" target="_blank" rel="nofollow" class="fancybox">Add</a>

...这里是代码：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type: "html", // because the content will be the "confirm" variable
        modal: true, // avoids closing fancybox but clicking "yes" or "no"
        afterLoad: function () {
            link = this.href; // page "B" URL
            this.content = confirm; // set fancybox content
        },
        afterShow: function () {
            // bind click to both buttons yes and no
            $(".button").on("click", function (event) {
                if ($(event.currentTarget).hasClass("yes")) {
                    location.href = link; // go to page "B"
                } else if ($(event.currentTarget).hasClass("no")) {
                    $.fancybox.close(); // close fancybox and stay in page "A"
                }
            });
        }
    });
});

参见 JSFIDDLE

编辑（2014年2月15日）：

OP说：

我正在尝试在单击“是”

时在新标签窗口中打开链接

要这样做，请更改此部分

if ($(event.currentTarget).hasClass("yes")) {
    location.href = link; // go to page "B"
}

进入这个

if ($(event.currentTarget).hasClass("yes")) {
    //location.href = link; // go to page "B"
    window.open(link); // open in a new tab
    $.fancybox.close(); // optional, otherwise fancybox will remain open
}

请参阅更新的 JSFIDDLE

将链接从页面添加到灯箱

1 个答案: