Tuesday, March 27th, 2007
Category: Component
, JavaScript, Library, Prototype
>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
HTML:
-
-
-
<div id="modal_window_one">Example One
</div>
-
<div id="modal_window_two">Example Two
</div>
-
-
<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>
-
<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>
-
<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>
-
<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>
-
<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>
-
<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>
-
</ul>
-
-
Event.observe(window,'load',function(){
-
new Control.Modal($('modal_link_one'),{
-
opacity: 0.8,
-
position: 'relative',
-
width: 200,
-
height: 200
-
});
-
new Control.Modal($('modal_link_two'),{
-
containerClassName: 'test',
-
overlayClassName: 'test'
-
});
-
new Control.Modal($('modal_link_three'));
-
new Control.Modal($('modal_link_four'),{
-
iframe: true
-
});
-
new Control.Modal($('lightbox_link_one'));
-
new Control.Modal($('lightbox_link_two'),{
-
opacity: 0.75
-
});
-
});
-
</script>
-
I totally can use this.
Too bad it doesn’t work flawless in Opera 9.x…
Nice idea though.
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.
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.
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.
Need to learn to check opera more often! Fixed for opera 9.x as far as I can tell. Thanks guys – Ryan
very nice work as usauall ryan, i will certainly be putting this to good usage !
/jester
Opera 9.x working here now. Nice work Ryan. Quality stuff.
@ryan – what do you use to power your site? wordpress? if so what theme. I like it.
What we should really be talking about is Picora!
I like it, especially the iframe.
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!
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 ;)
@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
No, is not because the “code blocks” my company firewall also detects is as unethical or illegal.
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.
How come too many people forget about keyboard navigation. It does not behave very modal to my tab key.
BTW, I really like your code’s syntax highlighting.
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…!
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.)
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.
Thanks Ryan, great fix and very quick!
@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.
@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!
Hi i would like to execute an ajax php script, the question is :how to parse variable to ajax modal? thank you
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).
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.
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…
Destroy the dialog objects!