Modal windows with Javascript and CSS

One of the side projects I spent a little time on today was researching the use of on-page modal dialog boxes using Javascript and CSS that shade or darken the rest of the page while they are open. It looks like it will be an easy job thanks to these two solutions that are made freely available:

I’m leaning towards subModal right now since Lightbox uses prototype.js which adds 48K to the first page view. We serve around 150,000 unique visitors per day so adding prototype would result in an additional 150 * 48K = 7GB of bandwidth usage per day (we’re not currently running mod_gzip).

Update: here are some other solutions including a draggable one, DHTML Window (draggable but no shading), draggable with shading or fixed position, and Popup Window 4.5

Related reading: Popups with a twist, Sublog: author of subModal’s blog, and Inline popups

This entry was posted in Desktop, Javascript, Web. Bookmark the permalink.

3 Responses to Modal windows with Javascript and CSS

  1. Pingback: BlairDee.info » In-Page Modal Windows (grays out the background)

  2. Oli Spr says:

    Wow! I’ve been looking for the ideal modal window for quite some time, and SubModal was my answer. Thanks for the resource!

  3. divya says:

    Hey ..
    How to make modal dialog to be not movable in javascript

    Please reply soon

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>