Wednesday, February 8th, 2006
Modal Dialog: Lightbox Goes Wild
Chris Campbell has written up a detailed look into an alternative implementation of Lightbox (which we linked to awhile back).
The entry goes into detail on the CSS and JavaScript required to build the modal dialog, and it uses Prototype.
Brian Shih integrated Scriptaculous effects, which makes it look very Apple-ish. You can check out an example by clicking on the image in this post
Update: Moo.fx, not Scriptactulous, was used for the effects.
3.8 rating from 95 votes
Dojo also has a pretty nice modal dialog, an example is here.
This, nor dojo’s dialog from the previous comment, is neither pretty, nor apply-ish, nor modal.
They are not pretty because, oh well, they’re kind of ugly.
They are not modal because you can tab outside them and interact with the page on the background.
And the demo linked from the article is typical in that it immediately spawns a couple of javascript errors…
The state of Ajax?
That’s weird, I just tried and wasn’t able to tab out of dojo’s modal dialog.
As for pretty-ness, it seems odd that you think it ugly, yet a well known industry leader in web/print design seems to think they’re pretty neat. ;)
http://www.lukew.com/ff/entry.asp?224
try clicking on the background page and start tabbing then…
about uglyness: have you taken a look at it in IE? About 90% of the browser population… There’s a dashed line running right through the title… There is no padding at all for the main text… The buttons are scattered across the dialog… the field-labels aren’t nicely vertical aligned… Try clicking OK without filling any field and look at the result: it’ll hurt your eyes. The tab order of the buttons is wrong… Need I go on?
No one in their right mind would call this pretty, nor good… It’sall so… mediocre and hyped… There is no one paying attention to the details. Everything about it smells like technicians thinking they know what’s good looking.
It’s as goodlooking as Sugar Lee Hooper in a thong, and its modality is as meager as I would expect it to be, from a site that gets credited on Ajaxian and has the same horde of lemmings drooling in ignorance over its lack of sanity.
Sean McBride is actually the one who implemented this modified version of Lightbox – we all run the site together, and I just happened to write this post. Glad you like it though :)
[...] Modal Dialog: Lightbox Goes Wild: [...]
While I disagree with Martin’s attitude, I will agree that this can in no way be considered modal. In FF, I can click on the background, hit TAB once and then hit ENTER and the next link opens up.
=C=
Actually i am also making a modal-ish thing based upon subModal (google!). I am also implementing it using prototype and i am about 50% ready with it.
However, i am not going to create a box (at first) but i am going to create a slide-in (just as you can see at the bottom of the screen in the fluxiom movie). I’m thinking about the prototyping of it so you could either create a box or create a slider, just like i did. But for now, i am concentrating on the slider, so i get all functionality right first. :0
All required divs are created in the initialization of the subModal class and you will not be able to tab out of it (in any modern browser that is). I am going to use it for the backend i am writing.
The posts from Martin and Lon (possibly the same person?) are pretty funny for sheer flameyness. They do have one good point though, it’s not entirely modal, but about as good as we can get for a browser. I SUPPOSE you could write an additional script to keep the focus on the lightbox element while it was open, but I don’t feel like there’d be much of a point.
Also Lon, I’d like to know what browser you are seeing JS errors in? I’ve tested our version in the big 2 (IE and FF) and seen nothing… Since over 75% of our site’s traffic is from these 2 browsers alone, I haven’t bothered with anything else yet.
I’m the one who implemented the Lightbox with animations on alwaysBETA. The effects library used is actually Moo.FX, not Scriptaculous. I much prefer the Moo.FX library because it is really lightweight (3Kb for the base package). It only has 3 basic effects, but they can be combined as needed for pretty much all the effects you could ever want (with the possible exception of color fade).
“SUPPOSE you could write an additional script to keep the focus on the lightbox element while it was open, but I don’t feel like there’d be much of a point.”
This might not be important here, but the world does need a functional modal cross-browser dialog, the closer to true modality the better. It seems like between catching focus changes and watching key events it should be possible?
I’m not Martin and I disagree with his ‘over-enthousiastic’ attitude.
The errors I got are on the page that is behind the image (http://particletree.com/features/lightbox-gone-wild/)
These errors are:
Line: 2
Error: ‘dynamicLayout’ is undefined
and
Line: 295
Error: ‘addEventListener’ is null or not an object
And how hard is it to keep focus in your modal dialog? not hard at all! just catch click and keydown on the document level. Cancel if you dislike any of them.
My point now and in all my previous posts is that everyone is claiming all kinds of ajax stuff and this and other sites are hailing every little ajax widget. But if you look at the quality and esthetics of every single one of them you are bound to get disappointed.
No one is served with bad examples. Let’s tell everyone the truth. Most stuff stinks. Let us praise the good stuff and let us try and improve the rest.
@ Lon: Sorry for the accusation. I just thought the tone sounded similar. I misunderstood your intent eariler. I thought you were saying, “most AJAX/JS stuff sucks so why even try” when you were (I think) actually saying “most AJAX/JS stuff is rough around the edges and we should work on improving it.” I totally agree with the second one.
@ Sam: Yes, I agree that it is important to build towards robust AJAX/JS solutions to common interface elements. However, for the purposes of site-building, the author is often in “good enough to work for me” mode, not “build an extensible class for everyone” mode. But I do think that generic, robust tools are important. I’m currently working on an open source JS library for pagination. I’ll be releasing it sometime this weekend.
Hi all
@the script authors: first, the effect on http://www.alwaysbeta.com/2006/01/30/first-post/ is really nice and captures that apple feel perfectly. The problem is I’ve sat here with 3 other people a few hours now and we can’t replicate the effect. Javascript and validation errors aside (not that important at the moment) it would be more than helpful if you guys could package up a second zip file that demonstrates the effect so that more people could play around with the code.
I’ve even tried all of the blog replies / demo pages but no one seems to have been able to get the moofx to work right. One person used the lightbox_plus.js to make the loading animation play (something I tried with rel=”lightbox” to no avail)
Any help is appreciated.
greetings from europe,
Alex
Hi Sean,
my comments are a little rough around the edges as well. I guess I’m a passionate guy? So, no harm intended and certainly no harm perceived (by me).
I’ll try and polish my temper. It’s more productive. Although maybe slightly less fun.
Another way to come at the problems that Ajax is trying to solve is to extend the HTML langauge. The W3C has done this with XForms, which provides a number of interesting things, such as powerful data submission and validation, eventing without scripting, and so on.
Of interest here is the addition to HTML of a nice, simple, device-independent, accessible, internationalised element called
message. It is a proper modal message (i.e., blocking other processes) but it also supports modeless and ephemeral messages. And since it’s an extension to HTML then it can be styled with CSS, soleveraging expertise that people already have.There is an example that shows an error message on a form that saves links to del.icio.us (part of the Introduction to XForms tutorial).
There is a firefox bug here! It’s one I’ve been getting in my own applications, I thought I was going mad but now I’m not the only one to trigger it.
Using FF 1.5.0.1 (Win XP) when you open the example form “window”, then click in the fields, THERE IS NO BLINKING CURSOR.
This is about the biggest usability issue ever – I’ve had clients tell me their computer / the software is broken, because they can’t type – when actually they can, they just can’t see the cursor.
So now that there’s a publicly available case where the bug is triggered – has anyone else encountered it? Are there any known workarounds? It’s got me totally stumped.
Jed, I have read about this bug before related to the Dojo Toolkit’s rich text editor.
Not sure about a workaround though…
@Alexander: Never fear, I’m here with a new post! We’ve just written up a post on how we went about customizing the library for use on our site. You can go and check out the post right here.
One initial guess at your problem: If you were actually trying to use our lightbox.js, you also need to have the Prototype and Moo.FX Base libraries included on the page… That’s what we’re using for the animations. Check out the post for details.
I’d really like to rewrite Lightbox JS for use with sites that already have the Prototype library included. I have a feeling that using Prototype could make the js file *much* shorter.
[...] Ajaxian writes not once but twice about it. [...]
[...] Sean McBride at alwasybeta has a detailed entry describing their modification of the lightbox.js tool we covered earlier. For use at alwaysbeta, Sean integrated moo.fx, added a close button, did some general code cleanup, and added an attractive Apple-like spinner graphic for the loading image. [...]
[...] The effects are nicely done, and look very similiar to what the guys at alwaysBeta did with it, with the spinning progress indicator. There is also the large close box in the lower right corner, but I’m curious as to why its not in the upper right corner to remain consistent with standard GUI conventions. [...]
Jed,
I noticed the invisible caret bug too. Turns out this is a mozilla error. Its been fixed, and will be resolved in their next releae. But I’d love to find a workaround for people not using the up-to-the-minute latest build of mozilla. Any ideas?
http://www.squarefree.com/burningedge/2006/04/21/2006-04-21-trunk-builds/
thanks,
maulin
Check dojo dialog box
http://www.jyog.com