views:

2006

answers:

5

I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.

A: 

Grab the javascript ext library. It has functionality for overlays that are modal.

scubabbl
+1  A: 

You might want to check out an old JS lib I wrote, called SubModal.

Easy to understand and modify. Go to town ;)

Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.

Subimage
Now that's nicely written. Having a collapsing width problem though...
^^ can't see what you're trying to show. if you've got issues hit up the support google group.
Subimage
+2  A: 

Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.

It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.

_Lasar
+1  A: 

I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.

It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.

81bronco
A: 

ThickBox (no longer developed) led me to this library which seems to work very well:

http://fancybox.net

tam7t