Fancybox“离开本网站”弹出

我正在尝试为儿童移动网站创建一个fancybox弹出窗口。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弹出式消息传递到该网址或返回。

来源

2012-11-17 Joeykangaroo

“没有运气” - 你什么意思在这里？它能完成这项工作，但不符合你的预期？从字面上什么都没有发生？中间有什么东西？ –

含义我已经使用fancybox工作，这不是问题。但是，我唯一能解决问题的解决方案是为每个我想成为外部链接的“（a.link-id）.flexbox”声明，该链接将页面中的隐藏div调用到flexbox中，并且该div有链接。 – Joeykangaroo

所以，请在你的问题中包含你的部分解决方案，并用它解释你的问题（代码总是很好，你应该能够编辑你的问题）。 –

是否使用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。

来源

2012-11-17 18:15:48 Beardy

谢谢！正是我在找什么。 :)我使用fancybox只是为了模态对话框，现在有几行jquery可以让它显示，这是CSS转换到救援。 – Joeykangaroo

很高兴我可以帮助，祝你好运的网站。 – Beardy

您可以在所有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/

来源

2012-11-17 18:36:03 Jan

我希望自己有足够的声望为您的解决方案+1。按预期工作。谢了哥们！ – Joeykangaroo

Fancybox“离开本网站”弹出

回答

相关问题