2

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

  • 它只会出现在外部链接中
  • 它提供链接以继续到外部网站链接或关闭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 ) 一个带有消息的花式框弹出窗口，可以转到该 URL 或返回。

4

2 回答 2

3

使用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 过渡。

于 2012-11-17T18:15:48.973 回答
1

您可以在所有元素上设置一个事件处理程序a，检查它是否是外部链接，然后打开一个花式框窗口。就像是：

$("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/

于 2012-11-17T18:36:03.587 回答