FancyBox Will Not Open Link To External Page

Question

I am having an issue with FancyBox and its probably really simple to fix but I can't figure it out. I have a link and when the link it clicked, I want it to open external page. But the problem is the link just refreshes the current FancyBox, and never opens the other page. Here is my code:

$("#preview-box").html('<a href="http://www.google.com" target="_blank" >Go To Original</a><iframe sandbox="allow-forms allow-scripts" src="http://www.yahoo.com" width="100%" height="100%" style="min-height: 500px;"></iframe>');

$('#preview-box').fancybox({
    autoSize: false,
    width: '80%',
    height: '80%',
    onClosed: function () {
        $("#preview-box").empty();
    },
    afterClosed: function () {
        $("#preview-box").empty();
    }
}).trigger('click');

My question is why isn't the new link opening up in a new tab and just refreshing the current content, and how can I get this to work?

No errors are generated by the console – Devin Dixon Jun 09 '13 at 19:25 — Devin Dixon, Jun 09 '13 at 19:25

JFK · Accepted Answer · 2013-06-10T00:14:44.780

I read your code too fast and voted your question to be closed as duplicated, sorry :(

The real issue you have is that you are in a loop : the selector that you bound fancybox to (#preview-box) is the same selector that fancybox is targeting to ... so every time you click the link inside fancybox (which is displaying the contents of #preview-box) the same selector is called over an over again inside fancybox.

You should rather change your code into this

$("#preview-box").html('<a href="http://www.google.com" target="_blank" >Go To Original</a>');

$.fancybox({
    href: "#preview-box",
    autoSize: false,
    width: '80%',
    height: '80%',
    afterClose: function () {
        $("#preview-box").empty();
    }
});

I removed the unnecessary, obsolete or faulty code like the iframe and the onClosed API option.

See JSFIDDLE

FancyBox Will Not Open Link To External Page

1 Answers1