How do I make sure that the user can't open more than one popup at any time?

Question

I have a page that lists uploaded attachments and an icon next to each attachment that opens a popup window (when clicked) to allow the user to edit assorted attachment information for each attachment.

My questions are:

1. How do I ensure that the user is allowed to open only one popup window at any one time

2. When the user tries to open another popup window, an alert will pop up and tell him/her that they aren't allowed to open more than one window.

Thanks.

Answer 1

Why not make each popup modal so that it has to be dismissed before you can interact with the main page. This would be pretty easy to do with the jQuery Dialog plugin, but you could also make your own with some javascript/css magic.

Answer 2

Give the popup a name when you are opening it. This will force any subsequent clicks to open in the same popup window. You can then implement the window.unload event to prevent users from navigating away from the page that is currently being saved.

If you are using jQuery though I would suggest you use the ui.dialog to provide the functionality in the page. Then you will also force the users down a one at a time edit.

Answer 3

Create a cookie or global (client or server-side based on your needs) flag and check if it's set each time the popup is triggered.

Answer 4

You can use a "handle" to the window and check if it is open or not, here is a sample:

var vWin = null;
var msWindowUsedMessage = "A previous action was not completed.\nClose the window and try again.";

function IsWindowUsed(oWindowToCheck) { 
    if (!oWindowToCheck.closed && oWindowToCheck.location) { 
     alert(msWindowUsedMessage); 
     oWindowToCheck.focus(); 
     return true;
    } 
    return false;
}
function Open_New_Window(sUrl, sTitle, sParams) {
    var winLeft = top.screenLeft + 50;
    var winTop = top.screenTop + 50;
    var oWindowHandle = window.open(sUrl, "", sParams + ",toolbar=no,top=" + winTop + ",left=" +  winLeft); 
    oWindowHandle.opener = self; 
    return oWindowHandle;
}

function Add() { 
    if (IsWindowUsed(vWin)){ 
     return;
    } 
    var sParams = "width=380,height=10,status=no,resizable=yes"; 
    var sUrl = "add.aspx";
    vWin = Open_New_Window(sUrl, 'Add', sParams);
}

Answer 5

When you create a new popup, set variable to point to the new window and then check if it has been closed or not:

var currentPopup = null;

function openPopup(){

    //test that we have either not opened a popup or have closed it.
    //references to closed windows don't disapear, but have their closed property set to true.
    if(!currentPopup || currentPopup.closed){

        //set the new currentPopup variable to reference the new window.
        currentPopup = window.open(...);
     }
     else{
         //A window is open! Display error message.
         //for the best user experience use a nice way to display the message as opposed to using an alert();

    }
}