Making pop-up windows modal

Jake Howlett, 30 October 2001

Category: JavaScript; Keywords: dialog modal window pop-up

Hmm, the infamous Pop-Up Windows I don't know about you but they are enough to make we want to scream sometimes. More often than not nowadays they are the source of advertising (something that codestore must show I shy away from). Whenever I see one now I automatically close it before it has chance to load (cursing beneath my breath at the site's audacity, daring to do things on my PC that I didn't ask them to do).

The only time I give them chance to load is when I have made some interaction with the page, from which, I would expect to see a pop-up as the result.

This is not to say that I don't think they are useful. They are. Just when used under certain circumstances. When we are talking about Domino then the only one that stands out is the need to gather information from a user beyond that which is normally required. For example, a form that has a list of options followed by "Other". Choosing "Other" requires the user to make further choices - an ideal use of the pop-up. Now I'm going to be even more pedantic and talk about the modal state of these pop-ups. They are not modal. As much as you try to make them so, using JavaScript blur and onfocus methods, they will not become modal. These non-modal pop-ups have the annoying ability of sticking around when they are no longer required, having failed in their duty to perform a certain function. This is where the modal dialogue comes in.

Don't worry, I am going to stop ranting and start telling you something you want to hear right now.

To see a TRULY modal dialogue click on this link. You will need to be using IE4+ to do this. What you should see is a window that remains in focus even when you try to focus back on the parent window (this document). The beauty of this is that it means that whenever you need to use a pop-up, you can always rely on the user having had to do what was required, before they can carry on.

In this document I discussed how you go about returning a value from a pop-up back to its parent window. This is all very well but the pop-up is non-modal and can get left in the background. Let's see how we go about reproducing this same feature with the above modal method. Click on the "Choose Colour" button below to launch the "pop-up" and return a colour to the text field:

Colour:

So, how does this work:

Well for a start, don't worry, this isn't one of those dodgy uses of methods like onBlur and focus to trick you in to thinking a window is modal. This method uses an actual method of Internet Explorer's window object called showModalDialog.

To use this method, the first thing we need is to add a couple of functions to the parent form. Here's the first:



function myColourDialog(){

 var myColour;

}

This is simply there to act as a container object for the variables that you want to pass back and forth. You can change the name of this function and add as many variables as you need. Let's see what the next function looks like:



function openColourPickerDialog(wnd, field, dlgURL)

{

 myColourDialog.myColour="";

 if(wnd.showModalDialog(

    dlgURL,

     myColourDialog,

     "dialogHeight:150px;dialogWidth:300px;") 

       == true )

 {

  field.value = myColourDialog.myColour;

 }

 else

 {

  return;

 }

}

Here we initialise the value of the "myColour" variable and then open the Pop-Up. Notice that we passed the myColourDialog object in as one the arguments. This is how the new window knows what values we are working with.

The above function works by waiting for a returnValue from the Pop-Up. This will be true or false depending on whether the user cancels the pop-up or chooses a colour. If they choose a colour and then the return value is true the field on the parent has its value set to that of the myColour variable.

To call the pop-up we use a call like the one below in somwhere like the onClick event of a button:



openColourPickerDialog(window, document.forms[0].TextOutput, '9F0D8552077A408686256999005AC70D/$file/new_window.htm')

As part of this call we have passed the parent window's object. We also pass the field to which we want the chosen value returned and the URL of the page to use to display the choices.

All you need now is to add a function on to the pop-up form itself:



function sendAndClose( selObj ){

if ( selObj.selectedIndex != 0 ){

  window.dialogArguments.myColour = 

   selObj.options[selObj.selectedIndex].text;

  window.returnValue=true;

  window.close();

 }

}

This is then called from a button on the form in the pop-up, in its onclick event, like so:



sendAndClose(this.form.Colours);

"Colours" being the name of the drop-down field in our example.

So, there you have it. This is the minimum you need to exchange data with modal pop-ups. You can take it as far as you need by editing the functions I've listed above to your needs. This can really be quite powerful once you understand the basics...

One small thing:

As great as this method may appear it does have one drawback. You can only use static pages in the pop-up. So, for instance, you couldn't display a view with a Next and Previous link, as this would require the page to be submitted back to the server. IE doesn't like that.

Other reading:

You can learn more about this method of the window object at the Microsoft site: About the showModalDialog method