Enhancements to subModal

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:

  1. Convert an href into a modal window just by setting its class=”submodal”. Now you can do
    <a href="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.

  2. You no longer need to put special div containers in each individual page, subModal.js now adds them to the DOM for you.
  3. I fixed a bug in Opera where one of the subModal functions that gets triggered on page load was called infintely.
  4. Moved all the javascript into subModal.js and removed common.js
  5. 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

  1. 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;
    }

  2. Todd Huss says:

    Thomas, thanks for the tip! I’ve added the fix to the zip file and the demo version.

  3. Charles says:

    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?

  4. Todd Huss says:

    Charles, using the target=”_top” attribute on your form tag should cause it to submit to the top window (rather than the current iframe).

  5. Charles says:

    Todd, you are absolutely right. Thank you very much for quick reply. Your hack is awesome!!!

  6. Ken says:

    Thank you for all your great contributions. Could you please provide a sample of using the CallBack function ?

  7. Gary says:

    Thank you. I’m hoping to access this script via a button in flash. Any suggestions on how to accomplish this?

  8. Todd Huss says:

    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: http://www.spoono.com/flash/tutorials/tutorial.php?id=20

  9. Scott says:

    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.

  10. Todd Huss says:

    Hi Scott and Ken, I’ve never used that function but Scott (the original author) talks mentions it briefly in his original post here: http://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 iframe 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.

  11. Luke says:

    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?

  12. JureV says:

    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.

  13. Todd Huss says:

    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 http://gabrito.com/files/subModal/ or the original and if so on what platform?

  14. 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

  15. Todd Huss says:

    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?

    http://gabrito.com/files/subModal/

  16. JureV says:

    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…).

  17. Dave Campbell says:

    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;
    }
    }

  18. Todd Huss says:

    Dave, thanks for the improved code! I’ve added it to the distribution and added your name to the credits in the js file.

  19. Parker says:

    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.

  20. vadim says:

    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

  21. Todd Huss says:

    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:

    http://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?

  22. vadim says:

    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 http://www.subimage.com/dhtml/subModal.
    Do you have any suggestions of what might be causing this on my side?

    Thanks again

    Vadim

  23. Todd Huss says:

    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:

    http://www.joehewitt.com/software/firebug/

  24. vadim says:

    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

  25. Jeff says:

    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

  26. v says:

    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

  27. v says:

    Sorry for the above comment:

    Btw heres the doctype that should work

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    And this is what I’m using

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  28. vadim says:

    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

  29. Tom says:

    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?

  30. Tom says:

    For those who want to see my problem in action …
    Have a look at:
    http://www.lostonearth.nl/tools/filebrowser/

  31. Todd Huss says:

    I’m glad so many people are enjoying my submodal derivative! The support requests have become time consuming though and mostly for issues that aren’t problems with submodal. So I’m shutting off comments and only accepting patches/fixes now. If you’re smart enough to be using submodal then you’re smart enough to fix it and test the fix across browsers.

    If you think you’ve fixed a bug with submodal create a patch file for it and email it to thuss at gabrito dot com and I’ll incorporate it into the main distribution!