Hi Scott,
I've been putting some time into this, and you can see how I'm getting on here:
http://github.com/pete-otaqui/jquery-ui/blob/master/ui/jquery.ui.modal.jsThere are a couple of visual tests too, for example:
http://github.com/pete-otaqui/jquery-ui/blob/master/tests/visual/modal/modal_large_internal_dom.htmlSome notes:
* I've moved to using .bind() instead of .live(), and to using the 'focusin' event since that bubbles.
* I've copied some some code (overlay size & content positioning) over from jquery.ui.dialog.js
* I've added in capturing tabbing out of the first and last (in source order) tabbables to stop focus going around the browser's chrome. This mimics the current modal dialogs behaviour in FF.
* All event callbacks are their own methods, so that unbinding is safer.
* There's a bug in Opera 10 on OS X (and possibly others) where some loop-around tabs are doubled, skipping a field. You can shift-tab back in to the skipped field.
* The "overlay" part is still internal to "Modal", but as with dialog this could probably be pulled out nicely into its own class.
* Some of the methods (e.g. _lockFocus, nextItemByTabIndex, _trackFocusedElement, _trackShiftKey and _captureTabOutOfEdgeElements) are effectively "static". I did this so that they are easy to refactor and re-implement.
* There must be a cleaner, and probably more efficient, way of sorting focusable elements while maintaining source-order in cases of equal tab index values.
There are some things that I have consciously not addressed yet:
* Instance re-use
* Multiple modal elements (e.g. something in a modal opens another modal)
* Modal content larger than the viewport
* Proper theming
I'd be interested to know what you think!
Pete