CODEWITHSUNDEEP
javascriptjquerycolorbox
nitsuj
nitsuj

Reputation: 780

How do I close colorbox iframe with javascript?

I need to close the colorbox iframe that overlays the website with an onclick event. I have seen the code as parent.$.colorbox.close(); return false;, but it doesn't work for me when I use it like this: <a onclick="parent.$.colorbox.close(); return false;">close</a>. I think that it is because I am not using a standard colorbox script to call the iframe. I modified it so that I can get height and width from the html anchor tag:

MY COLORBOX SCRIPT:

$.noConflict();
    jQuery(document).ready(function($){
            $("a[rel='colorbox']").each(function(){
                    var getWidth = parseInt($(this).attr('width'))
                    var getHeight = parseInt($(this).attr('height'))
                    var getScroll = parseInt($(this).attr('scrolling'))
                    if(getScroll == 'yes') { var frameScroll = 'true'; }
                    if(!getWidth) { var getWidth = '720'; }
                    if(!getHeight) { var getHeight = '480'; }

                    $(this).colorbox({innerWidth:getWidth, innerHeight:getHeight, scrolling:frameScroll, iframe:true, rel:"nofollow", transition:"elastic"});
            });
    });

What do I need to use to close this iframe onclick?

Upvotes: 0

Views: 8723

Answers (2)

Jack
Jack

Reputation: 9538

Instead of this:

parent.$.colorbox.close(); return false;

Use this:

parent.jQuery.colorbox.close(); return false;

You are calling noConflict, which divorces jQuery from the $ alias. Therefor your iframe is not going to be able to access jQuery through that $ alias.

Upvotes: 7

JimP
JimP

Reputation: 1076

you can either do <a onclick="$.colorbox.close(); return false;">close</a> or you can do something like $("#idOfCloseLink").click( function() { $.colorbox.close() });

Upvotes: 0

Related Questions