Question

我正在尝试为儿童移动网站创建一个fancybox弹出窗口。

只会显示外部链接
它提供了继续访问外部网站链接或关闭fancybox并返回页面的链接

到目前为止，我能找到的唯一解决方案是为每个链接使用类似的东西......

<a id="external" href="#external-block">Go to external link</a> 

<div style="display:none">
<div id="external-block">
<h2>Warning</h2>
<p>Hey, you're leaving this site <p>
<a href="onclick="$.fancybox.close();">Return</a>
<a href="http://actuallink">Leave the site</a>
</div>

和js

$(document).ready(function() {
  $("a#external").fancybox();
});

但每个链接都是多余的。我想找到一种方法来使用一个js函数来检测页面上的链接是否是外部的，当它被单击而不是转到url时它会抓取href并生成（即每个链接没有隐藏的div））一个fancybox弹出窗口，带有消息传递到该URL或返回。

Answer 1

使用fancybox是一项要求吗？没有它，这可能会更简单。

您可以创建一个隐藏的固定元素，该元素将充当灯箱，并在单击链接时使框可见。当然，您还需要添加自己的功能，通过关闭按钮来隐藏框，但这应该足够简单。

要在此新灯箱内设置外部链接，您只需执行以下操作：

$('a[href^="http://"], a[href^="https://"]').click(function(e) {
    // This is used to override the default event and
    // stop the browser from redirecting the user to the url.
    e.preventDefault();

    // Set the href for the #external_link element inside the lightbox
    // to the one from the anchor tag that was clicked on.
    $("#lightbox #external_link").attr("href", $(this).attr("href"));

    // Show the light-box
    $("#lightbox").show();
});

如果您正在使用fancybox提供的淡化效果，我建议您花点时间阅读CSS transitions。

Answer 2

您可以在所有a元素上设置事件处理程序，检查它是否是外部链接，然后打开一个fancybox窗口。类似的东西：

$("a").on("click", function(e) {       
    if ($(this).attr("href").indexOf("http://")>-1
       ||
       $(this).attr("href").indexOf("https://")>-1)
    {
        e.preventDefault();
        e.stopPropagation();
        message = "<div>This site opens in a new window<br/>" + 
                  "<input type=\"button\" value=\"Continue\" " +  
                     "onclick=\"location.href='"+$(this).attr("href")+"';\">"+
                  "</div>";
        $.fancybox(message);

    }
});

小提琴中的“继续”按钮不起作用，因为它会阻止外部链接，但它的工作代码如下： http://jsfiddle.net/6nfWJ/

Fancybox“离开这个网站”弹出窗口

2 个答案: