Tuesday, March 27th, 2007

Control.Modal: Unobtrusive CSS Modal Windows and Lightboxes for

Category: Component, JavaScript, Library, Prototype

<p>Ryan Johnson is up to his tricks again. This time he has created Control.Modal, an unobtrussive CSS modal window based on the Prototype library.

It weighs in at around 8K and hit a sweet spot for some functionality. The Prototype
window class was overkill, and he needed more than just a lightbox).

Example Code

  1. <div id="modal_window_one">Example One</div>
  2. <div id="modal_window_two">Example Two</div>
  3. <ul>
  4.     <li><a href="#modal_window_one" id="modal_link_one">Relative Modal</a> - Opens a local modal window relative to the position of the link. With custom width and height.</li>
  5.     <li><a href="#modal_window_two" id="modal_link_two">Centered Modal</a> - Opens a local modal window in the center of the screen. Adds CSS classes to the container and overlay.</li>
  6.     <li><a href="http://livepipe.net/projects/control_modal/modal_ajax" id="modal_link_three">AJAX Modal</a> - Opens a modal window that is the response of an AJAX call.</li>
  7.     <li><a href="http://livepipe.net/projects/control_modal/modal_iframe" id="modal_link_four">iframe Modal</a> - Opens a modal window that contains an iframe.</li>    
  8.     <li><a href="http://livepipe.net/ryan/photos/photos/Plants/Banners_Closeup.jpg" id="lightbox_link_one">Lightbox One</a> - Opens a modal window with an image inside.</li>  
  9.     <li><a href="http://livepipe.net/ryan/photos/photos/Water/Skippers_Creek.jpg" id="lightbox_link_two">Lightbox Two</a> - Opens another modal window with an image inside.</li>      
  10. </ul>
  11. <script>
  12.     Event.observe(window,'load',function(){
  13.         new Control.Modal($('modal_link_one'),{
  14.             opacity: 0.8,
  15.             position: 'relative',
  16.             width: 200,
  17.             height: 200
  18.         });
  19.         new Control.Modal($('modal_link_two'),{
  20.             containerClassName: 'test',
  21.             overlayClassName: 'test'
  22.         });
  23.         new Control.Modal($('modal_link_three'));
  24.         new Control.Modal($('modal_link_four'),{
  25.             iframe: true
  26.         });
  27.         new Control.Modal($('lightbox_link_one'));
  28.         new Control.Modal($('lightbox_link_two'),{
  29.             opacity: 0.75
  30.         });
  31.     });
  32. </script>

Control.Modal

Posted by Dion Almaer at 9:22 am
29 Comments

+++--
3.7 rating from 88 votes

29 Comments »

Comments feed TrackBack URI

I totally can use this.

Comment by very cool — March 27, 2007

Too bad it doesn’t work flawless in Opera 9.x…
Nice idea though.

Comment by Edwin Siebel — March 27, 2007

Fantastic. I can’t open the site because the office’s proxy, for some reason, has it categorized as “Criminal Skills”.

I wonder, can it handle iframes? For some specific places I need to use iframes for the popups (makes it that much easier to include a print button for just the iframe too) and I currently have to use a variant of the Lightboxes gone wild library. I could use a single extended library instead.

Comment by Eduo — March 27, 2007

Wow… to bad javascript can’t be fixed to support Opera 9.x. oh wait, yes it can. I am sure once he is aware of the issue he will fix it.

Comment by very cool — March 27, 2007

It can handle iframes. Firefox and IE handle it flawlessly from my experience, but safari has problems with multiple iframe modals, that all end up using the same URL. Googling for the answer yielded nothing specific other than people running into problems dynamically creating iframes with JS.

Edwin, thanks for the comment, I’ll do some testing with opera and post a fix today.

Comment by Ryan — March 27, 2007

Need to learn to check opera more often! Fixed for opera 9.x as far as I can tell. Thanks guys – Ryan

Comment by Ryan — March 27, 2007

very nice work as usauall ryan, i will certainly be putting this to good usage !

/jester

Comment by Jester — March 27, 2007

Opera 9.x working here now. Nice work Ryan. Quality stuff.

Comment by Mike — March 27, 2007

@ryan – what do you use to power your site? wordpress? if so what theme. I like it.

Comment by nice — March 27, 2007

What we should really be talking about is Picora!

Comment by chess64 — March 27, 2007

I like it, especially the iframe.

Comment by Dan — March 27, 2007

Added a couple more features based on this thread and some email. I didn’t think of it when I first wrote this, but I was able to add hoverbox like functionality with about 5 lines of code. There is an example on the page. Opera now supports all of the examples (had problems with the lightbox). Opera doesn’t appear to fire any of the on image load events, which every other browser seems to. Because of this the #modal_container may jump around for a split second in some cases, but it works.

@nice – I use Picora, a PHP framework I wrote.

@chess64 – I haven’t asked anyone to run any articles / blog posts on Picora yet. I get pretty polarized responses (more than most anything else so far), so I am a little nervous to have it hit bigger blogs. I’d love your feedback though!

Comment by Ryan — March 27, 2007

I just sat down to write this the other day …. now I feel invalidated :) Course, I’ll have to take a hard look at what he’s done and see what I might be able to take away from it. Woot! validation once more ;)

Comment by Dashifen — March 27, 2007

@eduo: Hilarious. I bet your company’s firewall detects that there are code blocks on the page, and that this must mean it’s a site dedicated to teaching “hacking”. Too funny.

@Ryan: nice work. Make sure you get this posted on prototypejs.org’s “call to developers” page: http://prototypejs.org/2007/2/1/a-call-to-prototype-developers

Comment by Ryan Gahl — March 27, 2007

No, is not because the “code blocks” my company firewall also detects is as unethical or illegal.

Comment by Masiosare — March 27, 2007

Its not actually modal … as I discovered by tabbing through links, I can use other links on the page while the “modal” box is still open.

Comment by Steve — March 27, 2007

How come too many people forget about keyboard navigation. It does not behave very modal to my tab key.

Comment by Erik — March 27, 2007

BTW, I really like your code’s syntax highlighting.

Comment by Blake — March 27, 2007

Ryan, this looks very nice. I like the idea of using it as a hoverbox, however, it is not useable in its current state, as in general hoverbox may appear on links to other pages. What would be very usefull is to have a way to attach the box to an element on the page. The element could be anything, so that we could use hoverboxes on TR as well as on links…!

Comment by Bertrand — March 28, 2007

What is so unobtrusive or CSS about meticulously using javascript and Prototype to implement a sluggish version of the CSS position:fixed? It’s perhaps a necessary fallback to work with browsers from the nineties (if that’s important to you), but why not have it use position:fixed for the large majority of present day browsers that do support it?

(Yes, the earliest lightbox hacks from those days used the javascript event handlers, blood, sweat and gore approach to do accomplishing this. That’s no reason to do the same today because your grandfather had to.)

Comment by Johan Sundström — March 28, 2007

just what the doctor ordered! I was going to make something like this too but your version rocks so much more. I also had problems hacking the lightbox to do additional things.

Comment by Alex93053 — March 28, 2007

Thanks Ryan, great fix and very quick!

Comment by Edwin Siebel — March 28, 2007

@Johan Sundstr̦m Рyou got a better solution? Lets see it.
@Ryan – I don’t think position “fixed” is some magic cure-all. What i would do is if the modal box is open, set document.body and document.documentElement style.overflows = to ‘hidden’; (stops scrolling for even an option) if its an ie only thing you can even use runtimeStyle. to temp override the existing style. and use “fixed for every other browser.

Comment by okbutwait — March 28, 2007

@johan – It’s true that position fixed is a much better solution, but IE6 still makes up a pretty huge chunk of the browser market, and for the projects I am working on which I wrote this for, it was a requirement. I was writing javascript back in the 90′s too by the way =)

@okbutwait – I feel like I tried something something similar to this and had trouble getting it working cross browser. With IE I ran into the usual problems with fixed positioning, but in other browsers I had a problem when the modal window was taller than the height of the viewport or document. I’ll try that again with your suggestion. Just out of curiosity, is there something visually (not conceptually) broken about the current implementation for you?

@steve, erik – Totally agree with you. I use keyboard navigation all the time and that totally escaped my mind. From looking at other implementations, and googling for answers on how to disable links or keyboard navigation entirely, I’m not coming up with anything workable. Any ideas?

Thanks for the feedback and suggestions everyone!

Comment by Ryan Johnson — March 28, 2007

Hi i would like to execute an ajax php script, the question is :how to parse variable to ajax modal? thank you

Comment by Paul — March 29, 2007

Fork the code so that only IE6 browsers get the huge event handler position:fixed emulation layer. Might also make that code much lighter, as it only needs to cater the few old browsers you care about that need it. Then have the others get the better code relying on position:fixed. You might actually break new lightbox ground with that (unless there is some YUI, Ext or jQuery hack available already — those usually use modern tech with oldstyle fallbacks like that).

Comment by Johan Sundström — April 2, 2007

Ryan,

Nice work!

Re: the hover option — It would be useful to be able to specify a delay, so the mouse has to be over the element for a certain period before the hoverbox appears. This would prevent unwanted hoverboxes flashing up when the mouse is only over the element momentarily.

Would also be nice to be able to specify an effect, most usefully to have the window fade-in on open.

Comment by David — April 5, 2007

Does anyone knows another window\dialog implementation? I know only xilinus.com and control.modal, but I want to have macos-like dialogs for prototype.js library…

Comment by mikhail — July 7, 2007

Destroy the dialog objects!

Comment by Unobstrusive? — September 13, 2007

Leave a comment

You must be logged in to post a comment.