How can I close an overlay in a function? Created Aug 22, 2010

Is the overlay really installed in the #submit element? It seems to me that you might have to do something like:

$("#submit").click(function () {
  // assuming overlay is installed in element with id="overlay"
  $("#overlay").data("overlay").close();
});

$("#overlay").overlay().close() should also work, but jQuery's data method is recommended and perhaps cleaner.

Hi, I tried this approach:

$("#overlay").data("overlay").close();

and it works. But when I reopen the overlay and try to close it again with the same approach it doesn't work (it doesn't close the overlay).

When I call the isOpen() method after reopening it delivers false although I can see the overlay (when I first open the overlay isOpen() delivers true).

Does anyone know how to solve this problem?

There must be something else interfering; works alright in this little demo with 2 overlays:

http://www.blacktrash.org/test/overlay-minimal.html

$(document).ready(function() {
  $("img[rel]").overlay();

  $("button").eq(0).click(function () {
    $("img[rel]").each(function () {
      var ol = $(this).data("overlay");
      if (ol.isOpened()) {
        ol.close();
      }
    });
  });
});

blacktrash,
thanks! That works pretty nice.

hello,

i used the overlay function.

but i have problem with a close button > inside the overlay <.

i dont know how it works. all solutions i read about
> outside closing < and the css class ".close" doesnt work.

who can help?

i tried with this unfine solution:

document.getElementById('exposeMask').style.display = "none";
document.getElementById('overlay').style.display = "none";
document.getElementById('contentWrap').style.display = "none";

but the background image doesnt closed!!!

info: in my overlay no relations to any jquery functions (js)
only css files!

Hey guys,

if anyone is like me and none of the above solutions worked.

I figured out a fool proof way that should work for any circumstance:

$('.close').live('click', function() {
        
        $("#videoOverlay").fadeOut('slow', function() {
           
          });

        $("#exposeMask").fadeOut('slow', function() {
            
          });

    });

The .live will allow this to work with any close object whether it was dynamically created or like me, hardcoded into the overlay.

Hope it helps!