how to close overlay Created Jun 14, 2009

Grab the api and use jQuery:

var o = $("a[rel]").overlay({api: true});
// click on paragraph of class pclose closes overlay
$("p.pclose").click(function () {
  o.close();
});

<p class="pclose">close!</p>

How to do this, if I hava an external overlay.
As far as I can tell , the external overlay can not get the var o.

Ah, the <p> is inside the overlay, and not on the pager from where the overlay is triggered?

I believe this could be the right guess as, the more I think about it, it doesn't make sense otherwise because the overlay closes (at least with the default closeOnClick setting) when you click anywhere on the originating page.

So, if my second guess is right, assign the close to your <p>:

<p class="close">close overlay</p>

If additonally you want to replace the close button, do as instructed in the overlay docs:

$("JQUERY SELECTOR").overlay({
  close: "p.close"
});

Please confirm which of my guesses is right, or rephrase your question.

it's possible to close overlay when you click on image? or maybe area of image?

thanks.

Please see above, only with img instead p.

your code works perfect if close "button" is outside the overlay. i want to close overlay, if "button" (<p>, <img> or smth) is inside the overlay. can you help me with code? thanks!

I just tested, and as I said, you just have to activate your "button" by assigning the "close" class to it:

<div class="overlay">
  <p class="close">close it!</p>
</div>

If additionally you want to keep the autogenerated close button you have to insert an empty <div> (again assign the "close" class) at the beginning of the overlay:

<div class="close">
  <!-- close button, must be styled with css as usual -->
</div>
<div class="overlay">
  <p class="close">close it!</p>
</div>

In case you want to use a different selector you have to configure the overlay script accordingly:

$("a[rel]").overlay({
  // paragraph of class "myclass" closes overlay
  close: "p.myclass"
});

<div class="overlay">
  <p class="myclass">close it!</p>
</div>

Hello Blacktrash,

i Tried your solution but it looks like it's not working for me.
I explain my problem.

first i bind my overlays and my triggers as it's show on flowplayer example.

Here is an example of what you can find in my overlayed elements :

<div class="overlay">
     <div id="Content">
            Here you have some content with links
            which have already be bound and work.
            like : <a href="" anTtribue="">a link which is suppose to close the overlay</a>
     </div>
</div>

So what i want is when i click on the link it does something (an ajax code etc.) but i also want to close the overlay at this moment or later for the moment the user don't have to do it.
for the process and cie it works fine but the api.close() function doesn't seem to work.

with an alert(), i can see that the function is called, but my overlay is still there.

i tried all the hint you gave and tried on my own many stuffs but i have no result.

i really don't understand, the alerts i put show me that the function should be working normaly but it doesn't.

So if anyone have an idea it would be kind.

After watching carefuly it seems that the function is acting just like if my overlay was already closed.
dunno why.

Well, I don't see that you gave your href the "close" class.

Try:

<div class="overlay"> 
     <div id="Content"> 
            The closing link must have the close class:
 <a class="close"
 href="whatever">a link which is supposed to close the overlay</a> 
     </div> 
</div>

You can use a different class name, but then you have to configure the close property accordingly. Look for close in the Properties section of the overlay docs

Thank you for answering so fast.

well, actually i also tried to give a class "close" but it still doesn't work for me.

But i think I've understood the problem (even if i don't have the answer yet).

The thing is that i create dynamically overlays with their triggers and bind them.

When i retrieve the API while binding like this :

      $(function() { 
	overlayAPI = $("a[rel]").overlay({api: true}); 
		});

and use it like this :

    overlayAPI.close();

it tries to close the last overlay that's been bound.
So when i'm on it it works fine which is not the case of the others.

So i tried to create a new bind in order to retrieve the desired API like this :

    $(function() { 
        //"#"+dest give me the ID of the current overlay
	overlayAPI = $("#"+dest).overlay({api: true}); 
		});

But still, it doesn't seem to work.
With the last solution above, it even doesn't enter in the close() function.

Okay, i solved the problem but it's far to be the neatest way :

i added a closeAll function :

,
			
			closeAll : function(){
				$.each(instances, function() {
					this.close();
				});
			},

and then i call it.

i know that's contrary to proper coding but it does the job for the moment.

Hi Sampawende, i have the same problem but i'm new with this api. can i ask, how is that you added the function? is it when defining the overlay?

  overlayAPI = $("a[rel]").overlay({
  closeAll : function(){
  $.each(instances, function(){                    
         this.close();                
        });             
    }, api: true});  

or did you use it with the bind?

overlayAPI = $("#"+dest).overlay({api: true}); 

also to call this function would be like this?

overlayAPI.closeAll();

thanks in advance for your help

If the overlay has a default close button and you want to trigger it to close automatically, or from some other code use:

$('.close').click();

You can use that statement inside of the click code for another element:

$("#close_overlay").click( function() {
$('.close').click();
});

I know this is old but I've struggled to find a working example so I just wanted to say that jaydeeh's post worked for me:

I have the default close button and an extra link inside the overlay:

<a onclick="$('.close').click()">Close this overlay...</a>

Works a treat - thanks Jaydeeh!

Just wanted to offer my observations:

The problem exists because you're loading the overlay dynamically (via Ajax). That means the initializing code for the 'close' classes has already executed.

What you need to do is to initialize you close links in the callback of the get request

// taken from the jqueryTools example
$(function() { 
 
    // if the function argument is given to overlay, 
    // it is assumed to be the onBeforeLoad event listener 
    $("a[rel]").overlay({ 
 
        expose: 'darkred', 
        effect: 'apple', 
 
        onBeforeLoad: function() { 
 
            // grab wrapper element inside content 
            var wrap = this.getOverlay().find("div.wrap"); 
            var self = this; 
 
            // load the page specified in the trigger
            // + init events in its callback
            wrap.load(this.getTrigger().attr("href"), function(){
                $('.close', this).click(function(){self.close()});
            }); // end wrap.load
        } // end overly.onBeforeLoad
    } // end overlay config
}); // end document.ready

HTH,
Juergen

Juergen's solution was almost correct, although one slight formatting error(?) kept it from working on my end. adding a ); on the second to last close got it working for me.

$(function() {

// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({

effect: 'apple',
expose: {
color: '#282828',
loadSpeed: 200,
opacity: 0.7
},


onBeforeLoad: function() {

// grab wrapper element inside content
var wrap = this.getContent().find(".contentWrap");
var self = this;

// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"), function(){
$('.close', this).click(function(){self.close()});
}); // end wrap.load
}//end overlay.onBeforeLoad

}); // end overlay config
}); // end function

<div id="overlay_window_close" onClick="$('#new_login_window').expose().close();"></div>

I'm struggling with the same issue. I have a form inside my overlay (which content is from an external page) and when I submit the form I simply want that overlay to close. I just can't get it to work!! So annoying! Can anyone help with some simple code for an example.
Many thanks

Hi Pab_88,

I am having the same issue trying to get the overlay to close on a form submission. Did you have any luck with this?

Thanks!
Ryan