There's a little more to it than that, Gilles. First, it would have
been great if you had looked at the code to see what it was doing.
However, since you tested the dialog blocking you should have noticed
that tabbing off the blocking message does not allow you to activate
any of the other controls on the page. Leaving the tab key enabled is
intentional. Tabbing is a fundamental navigation element of the
browser and to disable it would prevent users from tabbing to their
address bar, search bar, etc. BlockUI goes to great lengths to manage
this "mostly-modal" user experience and includes code for handling all
the mouse and keyboard events.
Mike
> > It has been a long time since the first blockUI and "window" plugins
> > (e.g. lightbox/thickbox) became available. However, i still didn't see
> > this piece of code in any of these sollutions. All projects have
> > thesame "bug", you can TAB out of the lightbox, to the underlying
> > page. (For a demo, open any project demo page, open the window and hit
> > TAB a few times. Eventually you will "jump" the page to another
> > location.. Not very user friendly...).
>
> > Especially in blockUI this snippet can be usefull:
>
> > /**
> > * keepFocusInside (The name needs some work)
> > * Basicly it checks to see if the element which wants to receive
> >focus
> > * is a direct child of the SOME_ELEMENT you pass. If not, it returns
> > false.
> > */
> > function keepFocusInside(oEvent, oParent) {
> > if (oElement = oEvent.srcElement || oEvent.target) {
> > return jQuery(oElement).parents(oParent).length;
> > } else {
> > // For all other browsers
> > return true;
> > }
>
> > }
>
> > Usage When the "block" starts:
> > jQuery(document).focus(function(oEvent) { return
> > keepFocusInside(oEvent, SOME_ELEMENT); });
>
> > Usage When the "block" ends:
> > jQuery(document).unfocus(function(oEvent) { return
> > keepFocusInside(oEvent, SOME_ELEMENT); });
>
> > HTH,
>
> > Gilles
>
> Gilles, actually something like that is already integrated in Thickbox
> Reloaded:
>
> function blockKeys(e) {
> var allowed = $('a, input, select, textarea', modal);
> for (var i = 0, k = allowed.length; i < k; i++) {
> if (allowed[i] == e.target) {
> return true;
> }
> }
> return false;
> }
>
> As I borrowed that from the BlockUI plugin, it's not correct to state
> any of the solutions you're mentioning are lacking this.
>
> Thanks for sharing anyway!
>
> -- Klaus- Tekst uit oorspronkelijk bericht niet weergeven -
>
> - Tekst uit oorspronkelijk bericht weergeven -
Well, sorry Klaus, but i based this conclusion on this page:
http://malsup.com/jquery/block/#dialog
Show the dialog (in FF 2.0) and start tabbing. You'll soon see that
the focus jumps to the "tabs" on top of the screen. I didn't actually
"look" into the code, so sorry for that remark.
p.s. in your code.. Isn't that lacking the "button" element?
Just thought i'd share my code, and maybe improve that a bit...
