Gavin M. Roy wrote: > I've released 0.11 of the jquery-modalContent plugin with the following > changes: > > 2006-12-19 patch from Tim Saker <[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>> > 1) Keyboard events are now only permitted on visible elements belonging to > the modal layer (child elements). Attempting to place focus on any other page > element will cause focus to be transferred back to the first (ordinal) > visible child element of the modal layer. > > 2) The modal overlay shading now covers the entire height of the document > except for a small band at the bottom, which is the height of a scrollbar (a > separate thread to be opened on this problem with dimension.js). > > 3) I removed the code that disables and reenables the scrollbars. This is > just a suggestion really, realizing it could be one of those little things > that causes fellow developers to become unnecessary foes ;=). Personally, I > found it an annoying behaviour to remove a visible scrollbar causing the page > elements to shift right upon modal popup, then back after closure. If the > intent was to prevent scrolling it doesn't anyway since you can still page > down with the keyboard. Maybe it should be a boolean option passed in the > function signature? > > Nice work Gavin,
In my submodal plugin, (thesame functionality as your plugin, but extended with a content div), i also had to tackle points 2 and 3. Here's how i tackled those 2 points. Set the width of the div to 100%, this covers the width part. Now comes the tricky part, the height. We have to make sure it covers the entire content below it. You can't just leave "some" space empty for a scrollbar, since some people have scrollbars that are 50px high (i hate those windows themes). This means that it has to be as large as the document, except if the document is smaller then the viewport, then it has to be as high as the viewport. *You also have to take changes to the document into consideration.* And this is important. With this i mean that it could be possible that the div you show over the "modal" can grow in height, say with 600px. Then, if you'd scroll down you would see a lot of white space. To tackle the height problem, i use this code, but you really only need the "height" part: ----------[ snip ]---------- // Get document size var intDocumentWidth, intDocumentHeight; var intPageWidth, intPageHeight; if (document.documentElement && document.documentElement.clientWidth) { // Explorer 6 Strict Mode intDocumentWidth = document.documentElement.clientWidth; intDocumentHeight = document.documentElement.clientHeight; intPageWidth = document.documentElement.scrollWidth; intPageHeight = document.documentElement.scrollHeight; } else { if (document.body) { // other Explorers intDocumentWidth = document.body.clientWidth; intDocumentHeight = document.body.clientHeight; intPageWidth = document.body.scrollWidth; intPageHeight = document.body.scrollHeight; } else { if (self.innerHeight) { // all except Explorer intDocumentWidth = self.innerWidth; intDocumentHeight = self.innerHeight; } } } // for small pages with total size less then width/height of the viewport if (intPageWidth < intDocumentWidth) { intPageWidth = intDocumentWidth; } if (intPageHeight < intDocumentHeight) { intPageHeight = intDocumentHeight; } ----------[ snip ]---------- Oke, that's that. Now put this into a function and call it. Make sure that function returns the pageheight. This way you can stretch the div to the bottom of the screen. So when i initialize my submodal, i set the correct size. When the document is scrolled, i update the size (height) again so i am sure it covers any changes made to the page (content added/removed/etc). I hope i am helpfull with this. Best of luck. -- Gilles _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/