How can I ensure that a user cannot open more than one popup at any time?
I have a page that lists uploaded attachments and an icon next to each attachment that opens a popup (when clicked) to allow the user to edit different attachments for each attachment.
My questions:
-
How can I ensure that the user is only allowed to open one popup at any time
-
When the user tries to open another popup, a warning will appear and inform them that they are not allowed to open more than one window.
a source to share
You can use a "handle" on a window and check if it is open or not, here's an example:
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);
}
a source to share
Give the popup a name when you open it. This will cause any subsequent clicks to open in the same popup. Then you can 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 ui.dialog to provide functionality on the page. Then you will also force users to edit in turn.
a source to share
When you create a new popup, set a variable to point to the new window and then check if it was 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();
}
}
a source to share
Why not make each popup modal so that it needs to be removed before you can interact with the main page. This would be pretty easy to do with the jQuery Dialog plugin , but you can also make your own with javascript / css magic.
a source to share