Enhancements to subModal
Posted on March 10, 2006 by Todd Huss
I started hacking around with subModal (modal javascript windows with background shading) this morning to add some features I liked in Lightbox Gone Wild. You can try it out and download my changes to subModal here. They are:
- Convert an href into a modal window just by setting its class=”submodal”. Now you can do
<a class="foo.html" class="submodal">foo</a>
and when you click the link the contents will show up in a modal window. Previously submodal required specifying onclick functions and duplicating the target URL.
- You no longer need to put special div containers in each individual page, subModal.js now adds them to the DOM for you.
- I fixed a bug in Opera where one of the subModal functions that gets triggered on page load was called infintely.
- Moved all the javascript into subModal.js and removed common.js
- Safari active scrollbar fix suggested by Thomas Risberg in a comment on this post.
Here is the file with my changes: subModal.zip.
This entry was posted in Design, Javascript, Web. Bookmark the permalink.
31 Responses to Enhancements to subModal
I’ve been using subModal as well, but there is a problem in Safari when the window has an active scrollbar. The code used does not calculate the scroll amount so the centering is off leaving uncovered areas of the original page.
I fixed it witht the following code that I found somewhere else:
// — This original code did not work well in Safari
//var theBody = document.documentElement;
//var scTop = parseInt(theBody.scrollTop,10);
//var scLeft = parseInt(theBody.scrollLeft,10);
var scLeft,scTop;
if (self.pageYOffset) // all except Explorer
{
scLeft = self.pageXOffset;
scTop = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
scLeft = document.documentElement.scrollLeft;
scTop = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
scLeft = document.body.scrollLeft;
scTop = document.body.scrollTop;
}
Thomas, thanks for the tip! I’ve added the fix to the zip file and the demo version.
Todd, I wonder if it is possible to open submodal window where is eg form, fill out this form and submit it to parent window, not to modal window. Could you tell me how to do it?
Charles, using the target=”_top” attribute on your form tag should cause it to submit to the top window (rather than the current br).
Todd, you are absolutely right. Thank you very much for quick reply. Your hack is awesome!!!
Thank you for all your great contributions. Could you please provide a sample of using the CallBack function ?
Thank you. I’m hoping to access this script via a button in flash. Any suggestions on how to accomplish this?
Ken, which callback function are you referring to?
Gary, sorry, I haven’t done much flash programming but you can certainly call javascript from flash. I would take a look at this page I found: www.spoono.com/flash/tutorials/tutorial.php?id=20
Following up on Ken’s comment, any use of the stated callback functionality would be useful – e.g. showPopWin(“mymodal”, 300, 400, callmeback) followed by hidePopWin(true); where callmeback does something on the main window.
Hi Scott and Ken, I’ve never used that function but Scott (the original author) talks mentions it briefly in his original post here: www.subimage.com/sublog/subModal
The idea being that if you just hit the X button to close the window the callback function doesn’t get called but you could have a button in the br such as a Save button that you want to do something special with when it is clicked so you have that button call hidePopWin(true) and it will call the callback function.
I haven’t had occasion to use it yet so I don’t have a real world use case but I believe the proper syntax would be:
function onClose(result) {
// Do something when the window is closed via
}
showPopWin(”mymodal”, 300, 400, onClose)
then if you call hidePopWin(true) the onClose function should be called.
I cant seem to get a top margin set. For instance if I have a popup that is to large for the users resolution. The user would have no way to close the popup as the close button is hidden by the browser. Any ideas?
In Firefox 1.5 (1.5.0.3) when submodal opens, for a short moment, the scrollbars appear in the parent window, and dissappear in a moment, causing the parent and popup content to reposition slightly which creates an ugly “bump” effect. In the Lightbox demos there is no such problem.
Luke, the top bar going off the screen is a bug and I’ve fixed it and updated the subModal.zip file. I’ve created a variable called topMargin which you can search for and adjust if you want it to handle it differently.
JureV, I’m using the same version of Firefox but not seeing that issue. Do you see it on my version of subModal gabrito.com/files/subModal/ or the original and if so on what platform?
Script looks great! Though, for some reason, in Safari, it isn’t pulling the content for your modal window it only shows the frame. Not sure why, just thought I’d let you know. I’m running Safari 2.0.3 on OS X 10.4.6
Hi Ben, I’m using the same version of OSX and Safari but don’t have any issue. To confirm, when you go this page and click the button it doesn’t work for you in Safari?
gabrito.com/files/subModal/
Todd, I no longer have the wierd scrollbar appearing effect on Firefox anymore. I guess some Firefox plugin may have caused this problem (since the last time I have removed some plugins like tab managers…).
Looks like the comment doesn’t like less-than characters… here it is again:
if (elms[i].className.indexOf(“submodal”) >= 0) {
elms[i].onclick = function(){
// default width and height
var width = 400;
var height = 200;
// Parse out optional width and height from className
var startIndex = this.className.indexOf(“submodal”);
var endIndex = this.className.indexOf(” “, startIndex);
if (endIndex LESSTHAN 0){
endIndex = this.className.length;
}
var clazz = this.className.substring(startIndex, endIndex);
params = clazz.split(‘-‘);
if (params.length == 3) {
width = parseInt(params[1]);
height = parseInt(params[2]);
}
showPopWin(this.href,width,height,null); return false;
}
}
Dave, thanks for the improved code! I’ve added it to the distribution and added your name to the credits in the js file.
Noticing that this, otherwise kick-ass, submodal is interfering with img loads so that a linked image doesn’t display with Camino 1.0.1 (mac browser based on mozilla: caminobrowser.org). Works great in Firefox though. Any ideas? Thought they were both based on the same core. Thanks for your hard work on this.
Hi,
This is a great library. There is one problem with it which somebody might have an answer.
If the actual page’s height is long and a user has to scroll to some page sections, when submodal appears it’s background covers only part of the page, leaving other page sections accessible also submodal dialog will always appear only at the top section, even if it was called from the bottom.
Thank you
Vadim
Hi Vadim, I’m unable reproduce the behavior you’re describing. What browser, version, and platform are you using. For example could you go to this URL:
www.greatschools.net/modperl/parents/ca/1913
then click the “Sign Up Now” button to get the submodal and then scroll around and tell me if you see the bahvior you’re describing?
Hi Todd,
Thanks a lot for your reply.
Yes, your site looks OK in my browser (it’s IE6), and the submodal window popups in a proper place all the time, and when I scroll your site the window is positioned in the middle (except for cases when the browser is not maximized then window on your site does not reposition itself when the main window is scrolled), but anyway it looks very good.
For some reason in my app the popup is always positioned at the top of the browser window and the blueish div covers only the top part of the window, if I scroll the window down, the popup does not reposition itself. I just use the latest downloaded code from www.subimage.com/dhtml/subModal.
Do you have any suggestions of what might be causing this on my side?
Thanks again
Vadim
Hi Vadim, I’ve seen errors like that occur when other javascript on the page is conflicting with subModal or if you have a javascript error somewhere on your page. There’s a line in submodalsource.js that add’s an event to redraw the submodal window when the browser is resized or scrolled:
addEvent(window, “resize”, centerPopWin);
It sounds to me like it’s not running. Two suggestions:
1. In Firefox go to Tools -> Javascript Console and look for any Javascript errors on your page. You can ignore CSS errors.
2. Install the Firebug plugin for Firefox that will let you debug your Javascript and give you a green indicator if everything looks OK on the page:
www.joehewitt.com/software/firebug/
Todd,
I will definitely try to debug this.
You gave me a direction to investigate and I think the problem is in onscroll event because resizing works, it’s when I scroll down the image won’t position itself in the center of the page but rather slides up with the rest of the page.
Thanks a lot
Vadim
Todd,
I am playing around with your submodal code on a .NET webform and after some postbacks it seems to randomly make the sumodal form the new main form (like doing an “_top” in the call). Have you ever seen this, or have and tips on where to debug to catch what could be causing this?
Thanks,
Jeff
Todd
U’v done a nice job packing/upgrading this script.
vadim
Have you check the doctype of your page.
The doctype below will solve your problem I guess.
Unfortunately for me it wont because I have no control over it.
Below is the doctype of my pages.
Any Idea how to achive the save looks/bahavior with this doctype?
Thanks
Sorry for the above comment:
Btw heres the doctype that should work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And this is what I’m using
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Hi V,
This solved my problem, I had to both change the doctype of my page, and uncomment
addEvent(window, “scroll”, centerPopWin);
Thanks a lot,
Vadim
Hello,
This submodal is great and ideal to integrated it with my CMS as a file-selection tool. Unfortunatly I have a problem in FireFox (1.5.0.4). Any help would be greatly appreciated.
The case:
In the parent window I have a form with a textfield and a button. When the button is pressed the submodal is loaded and filled with directory listing and available files (all HTML). When user clicks on a file the parent.form.textfield is updated and submodal is closed.
The problem:
When the button is pressed to load submodal, the submodal loading.html is shown for less than a second, but when the actual ‘fileselection page’ is loaded, the parent.form is automatically submitted and submodal is closed. These last two actions are unwanted.
In IE the problem does NOT occur.
Any hints?
For those who want to see my problem in action …
Have a look at: