The many ways of closing a modal window (lightbox)...

Would someone be kind enough to tell me (or rather, remind me) what we need to place on a tag to have that tag close the modal window and return to the underlying page?

In the following example... http://www.vilverset.com/test2.html ...when you click on the first words on the page and call the modal layer, you can click pretty much anywhere and the overlay will go away, bringing you back to where you were.

But only in FF2 and IE7.

In IE6, you can only exit the overlayer by clicking the dark area around it, or one of the small thumbnails contained therein. Can someone tell me why?

It's been so long since I worked with this that I don't even remember doing it this way, much less how to make it behave consistently in all 3 browsers.

Thanks!

Posted October 10th, 2007 at 12:20am by jyeager

What I tend to do is put a close link in the top right hand corner of the modal container:

<div class="modal_box_close">
  <a href="#" onclick="Control.Modal.close();return false;">
    <img src="images/close.gif" alt="Close" />
  </a>
</div>

.modal_box_close {
  position: absolute;
  top: 8px;
  right: 8px;  
  width: 8px;
  height: 8px;
}

If you stick to this for all your Modals, users will have a consistent way of getting out of them.

Posted October 10th, 2007 at 4:01am by bbodien

(Typo in the CSS right property, obviously)

Posted October 10th, 2007 at 4:02am by bbodien

I'll consider that, thanks, but can you tell me where in my existing code it says to close the window? For instance, on the thumbnails... why do they close modal? I don't see any close code on them. :-S

Posted October 10th, 2007 at 9:25am by jyeager