1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blmodal.htm

was emailed to:

Thanks for sharing About.com with others!

Modal Windows

Join the Discussion

Questions? Comments?

Related Resources

Modal Dialog Box

Creating a popup window is reasonably easy if you just want another browser window of a specified size and you don't care if your visitors swap back and forward between the various browser windows. Where it becomes difficult (if not impossible) is where you want the new window to stay in front of the original window and not allow your visitor to interact with the original window until the new window has closed. We call a window that insists on retaining the focus like this a modal window.

The difficulty is that JavaScript does not have a standard way of creating a modal popup window the way it has a standard way to create an ordinary (modeless) window by using window.open().

A number of browsers (for example Netscape 4 or any version of Opera up to and including version 9) do not allow you to make a popup window modal at all. There is simply no command that you can use that will make a window modal in those browsers.

There are two groups of browsers that do allow you to create modal windows and each uses a different method to do so.

Internet Explorer adds an entirely new method to the window object to open a modal window - window.showModalDialog(). If you use that to try to open a modal window then if your visitor is running Internet Explorer then a modal window will be opened. If they are running some other browser then all they will get is a Javascript error.

The Mozilla based browsers (Netscape 6+, Firefox, etc) use a completely different method to declare that the window that is opened should stay in front . They use the normal window.open and just add an extra attribute modal=yes to the list of atributes that define the appearance of the window (unfortunately it still doesn't actually make it modal it just forces it to stay in front which is the best that you can do with these browsers). If you try to use this to try to open a modal window then the window will open in any browser (provided that it hasn't been blocked by a popup blocker) but it will only stay in front if the browser is one of the Mozilla based family. If your visitor is running Netscape 4, any version of Opera, or Internet Explorer etc. then the window will still open it just wont stay in front.

The best that we can do to set up a window that is as modal as we can make it is to combine these two together to create code that will open a modal window in Internet Explorer, keep the window in front in Mozilla based browsers, and which will just open a non-modal window in those browsers that don't support modal windows. Of course we don't want to test which browser that the browser itself claims to be since most Opera browsers are set to report that they are Internet Explorer. Instead we test for support for the showModalDialog method itself to identify those versions of Internet Explorer that support it. Combining the code together gives us the following (with the amendments from an ordinary non-modal window shown in bold).

function modalWin() {
if (window.showModalDialog) {
window.showModalDialog("xpopupex.htm","name",
"dialogWidth:255px;dialogHeight:250px");
} else {

window.open('xpopupex.htm','name',
'height=255,width=250,toolbar=no,directories=no,status=no,
continued from previous linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
}
}

All that remains is to set up the code to call our modal window function (and of course to allow those without Javascript to have the window open in a separate non-modal browser window as well.

<a href="xpopupex.htm" target="name"
onclick="modalWin(); return false;">click here</a>

If you want to see what effect that using all of the above code has in your particular browser then click here and if your browser supports modal windows then that is what will open and you will have to select the close link to close that window before being able to return to this page. If your browser doesn't support modal windows then the window will still open but it will not be modal.

If you require something to be properly modal across all browsers then you need to build your own modal dialog within the page itself instead.

Related Video
Windows Movie Maker: Importing
Windows Movie Maker Capture

©2014 About.com. All rights reserved.