Support
Please don’t email us using our contact form for support of SubModal. I’ve created a Google Group for SubModal. All your questions should be answered there.
Now on with the show…
I develop a lot of DHTML technology that’s pretty cool. Unfortunately I never really have time to document and share it with the world.
In my former professional life I created DHTML libraries for other developers working with the Kenamea messaging platform.
Running this blog has inspired me to make some of my code available to the public, so today I present you with a way to generate cross browser modal dialogs. I call my technique the subModal.
The subModal in action
History of the subModal
A couple years ago IE was all the rage. I was doing a lot of heavy DHTML work on IE-only web applications. Microsoft did a really cool (some would say really evil) thing with IE when they added a lot of functionality to the browser. One of my favorites was always showing modal dialogs.
As the years marched on new browsers like FireFox and Opera emerged and I kept working on DHTML applications. Sadly for me some of IE’s functions were thrown out the window since my code had to be cross browser compatible.
Of course modal dialogs aren’t required in the design of a web application, and other ways appeared to deal with this design challenge, but in some cases they’re a nice tool to have at your disposal.
I kept running into situations in which a modal dialog would be such a handy tool, but I had to change my design when the technology dictated that it was impossible.
One thing I don’t like about modal windows and modal dialogs is that you’re able to move the window around, possibly losing association with your main window. This technique binds the two together. You’re never going to lose the modal or it’s parent window.
If you want a browser based application that behaves like a rich client modal dialogs are a great thing. I use them frequently in creation wizards where breaking someone’s frame of reference is generally a bad idea for cognitive reasons.
How does it work?
The subModal works by placing a semi-transparent div over the browser, blocking access to the content below while still providing visibility. This maintains state and doesn’t make someone feel disoriented or lost by moving them completely to another page. Their frame of reference is kept while allowing them to perform a new task (usually closely associated with the content below).
Another div is layered and centered on top of the mask. This div contains an iframe which defaults to a “now loading” page. In my applications I usually place an animated gif inside of this page to make it appear the server is doing something while the user waits.
Finally the iframe’s source is swapped with the page you wish to display. When this page is loaded into the iframe it’s title is swapped with our fake title bar and displayed.
Note that this works best when used in concert with a scrollable div underneath. All of my apps make use of this layout technique. It’s rare that the browser window scrolls. This code supports scrolling the entire browser window, but I don’t recommend it.
Where does it work?
I’ve personally tested this technique with IE 6, FireFox 0.9+, and Opera 7. A good friend of mine tested it on Safari and also reports it works there. In theory it should work with IE 5.5, but I don’t have a 5.5 machine to test on currently.
UPDATE
Opera 7 works but with a hack. Since Opera’s css support doesn’t include opacity I’m using a 24 bit transparent PNG file for the demo. If you don’t care about Opera you can comment this out and it will still work in FireFox, IE, and Safari. I like that method better since you have full control over the mask color and opacity right from the CSS file.
How do I use it?
First you might want to download the code. After that it’s as easy as including references to a couple files and inserting some HTML into your page.
At the head of your file you’ll want to add the following references…
<head>
<link rel="stylesheet" type="text/css" href="subModal.css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="subModal.js"></script>
</head>
The css contains sizing and display styles for the popup elements.
Common.js contains standard functions I find useful such as attaching event handlers and obtaining the browser’s dimensions.
subModal.js is where all the action happens. Inside event handlers are attached for the load and resize events of the browser. The load event initializes dhtml objects that are reused when showing, hiding, or resizing the window.
The following HTML also needs to be included in your file. I generally do it at the bottom of the page.
This code could be generated dynamically by the javascript, but for now I like it in HTML.
<div id="popupContainer">
<div id="popupInner">
<div id="popupTitleBar">
<div id="popupTitle"></div>
<div id="popupControls">
<img src="close.gif" onclick="hidePopWin(false);" />
</div>
</div>
<iframe src="loading.html"
style="width:100%;height:100%;background-color:transparent;"
scrolling="auto" frameborder="0"
allowtransparency="true" id="popupFrame"
name="popupFrame" width="100%" height="100%">
</iframe>
</div>
</div>
Now that everything’s in place all you have to do is add something that’s going to call the function to show the modal.
This is accomplished by doing the following
showPopWin('your_url_here.html', width, height, callback_function);
The first argument is the file to load, followed by width and height (integers). Any content that overflows these dimensions will scroll inside the modal, like a real window.
The fourth argument allows you to pass a javascript function that will be called when the window is closed – by calling hidePopWin(true). hidePopWin will not call the return function by default. This is useful for cancel button functions.
Conclusion
I’ve sort of glossed over the the DHTML, so if you have questions check out the code or ask me a question on the google group. In real-world implementations I usually wrap everything inside of a div that throws a shadow over the transparent mask, which adds to the floating effect.
I’m sure some of you are already thinking about how you can put this to use and modify it. Go right ahead! Please just drop me a line if you use it.
I hope it’s as useful to you as it is to me.
Bonus round, the callback function
Updated on 1/11/07
I’ve added a quick write-up about how to use the subModal callback function here.