break out of iframe with fancybox

Question

I have a page with an iframe, on the iframe page I have a img that opens up a fancybox. This works just fine, It's just that the modal box targets the iframe, giving only part of the whole page a dark overlay and centering the fancybox on the iframe instead of the whole page.

This is the code:

<img src="/img/icons/calendar.png" class="fancybox" id="fancyCalendar" />

<script>
    $j('#fancyCalendar').click(function() {
        $j.fancybox.open({
            href: 'calendar.html',
            type: 'iframe',
            padding: 5,
            width: 880,
            height: 335
        });
    });
</script>

I've tried these things, none worked:

adding a target to the img
making the img a link with a target
prepending window.parent to the fancybox.open prepending
window.parent.parent to the fancybox.open

I don't know what else I can try, does anybody know how to doe this?

possible duplicate of [Extend Fancybox inside an iFrame to outside](http://stackoverflow.com/questions/6528177/extend-fancybox-inside-an-iframe-to-outside) — Paolo Casciello, Feb 28 '14 at 13:32
possible duplicate of [call Fancybox in parent from iframe](http://stackoverflow.com/questions/8853727/call-fancybox-in-parent-from-iframe) — JFK, Feb 28 '14 at 17:23
how to do it with fancybox v2.x http://stackoverflow.com/a/8855410/1055987 including demo — JFK, Feb 28 '14 at 17:24

score 0 · Accepted Answer · answered Feb 28 '14 at 13:31

iframes are a browser separate window inside another browser, so you can't do what you're trying to do.

The only workaround, that works only if the iframe is on the same domain as the top frame, is to call the fancybox function of the parent frame.

Inside the iframe you call:

window.parent.openFancyBox(url, params...);

In the parent you've your local function

function openFancyBox(url, ....) {
    ...
}

score -2 · Answer 2 · answered Feb 28 '14 at 13:33

-2

You have first load content in a iframe, and then open it with plugin fancybox.

answered Feb 28 '14 at 13:33

SirDeveloper

276
1
10

break out of iframe with fancybox

2 Answers2