CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Novocaine
Novocaine

Reputation: 4786

clicking button within iframe > hide div in parent window

I'm having an issue taking a click event on a button that's in an iframe (same domain as referrer) and making it close (in this case) 2 divs that are in the parent window.

Example html for the main page:

<div class="wrapper">
    <iframe src="foo"></iframe>
</div>
<div class="bg"></div>

Example html of the iframe:

<div class="btn_wrapper">
    <a href="http://www.foobar.com" class="yes">Yes</a>
    <a class="no">No</a>
</div>

JS:

// redirect
$('body').on('click', '.btn_wrapper .yes', function() {
    window.top.location = 'http://www.foobar.com';
});

// hide iframe popup wrapper and bg
$('body').on('click', '.btn_wrapper .no', function() {
    $('.wrapper').fadeOut(250, function() {
        $('.bg').fadeOut(150);
    });
});

The $('body').on('click'... functions do run successfully, as clicking the yes button does redirect, and in my full code, clicking no is made to set a cookie, which it does.

For some reason though it just doesn't hide the .wrapper which contains the iframe and a background overlay. How can I make this work?

I do not strictly have to use an iframe for what I'm building, however for the sake of consistency and integration with functions already in place i would really like to keep using the iframe.

Upvotes: 2

Views: 4110

Answers (1)

Kiran
Kiran

Reputation: 20313

Try:

$('body').on('click', '.btn_wrapper .no', function() {
    $('.wrapper', window.parent.document).fadeOut(250, function() {
        $('.bg', window.parent.document).fadeOut(150);
    });
});

Upvotes: 4

Related Questions