Modal Windows

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 - of course they may override it so that what you wanted as a new window appears as a new tab instead. Where it becomes difficult 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

A number of browsers 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.

Internet Explorer, Firefox, Chrome and Safari support (or partly support) window.showModalDialog(). If you use that to try to open a modal window then if your visitor is running one of these browsers then provided that it isn't blocked by a popup blocker then a new window will be opened (and in at least some browsers it will actually be modal). If they are running some other browser that don't support this command then all they will get is a JavaScript error.

There are also a number of browsers that support adding an additional option to the third parameter of the regular to make the window being opened stay in front of all the others (which isn't actually modal but is half way there). To do this you add modal=yes to the list of attributes that define the appearance of the window. 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 recognises the modal=yes. If it doesn't then if it isn't blocked by a popup blocker then the window will open normally and can go behind other windows. This at least has the benefit of not breaking in browsers that don't recognise the extra attribute.

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 whichever version the browser supports that makes the new window as modal as we can make it. Since the first of these alternatives actually does make the window modal in some browsers we'll test if that command is recognised first and use it if it is, trying the alternative in browsers that don't recognise showModalDialig.

function modalWin() {
if (window.showModalDialog) {
} else {'xpopupex.htm','name',
'height=255,width=250,toolbar=no,directories=no,status=no,menubar=no, scrollbars=no,resizable=no,modal=yes');

Of course even where these commands do work they are more often than not going to be blocked by popup blockers. 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.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow