Open and close pop-up window

Posted on 2002-05-01
Last Modified: 2013-11-28
I have a jsp page that opens a pop-up window and closes it using WindowHandle = and WindowHandle.close(). I now want to make the pop-up modal but I can't use the showModalDialog method as this doesn't return a handle to the window so it can't be closed by the calling jsp.

Here is some sample code i have :

function openWaitScreen()
waitScreenWindowHandle =;

// Method to close the wait screen
function closeWait()
     if(waitScreenWindowHandle != null)

Any ideas on how to make it modal?
Question by:devc33
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +5
LVL 33

Expert Comment

ID: 6983952

Expert Comment

ID: 6984084
LVL 22

Expert Comment

ID: 6984322
It can't be closed by the calling page anyway. It is modal!!

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 6985519
knightEknight - I looked at that site yesterday and still didn't fix my problem. Cheers anyway.

T.P. - that example isn't modal. I can already display a 'wait' pop-up but the thing i want to stop is the user focusing on the page behind the pop-up and hitting refresh which will send the data again. Cheers anyway.

CJ_S - so can modal pages only be closed by themselves?
LVL 18

Expert Comment

ID: 6986595
T.P. - that example isn't modal. I can already display a 'wait' pop-up but the thing i want to stop
is the user focusing on the page behind the pop-up and hitting refresh which will send the data again.
Cheers anyway.

so if you just want to stop the user from focusing on the other page, can't you put a script in the pop up that will return focus to the window if it loses focus?

I'm just guessing here...

<body onblur="this.focus();">

is this doable, or am i off my rocker?


Expert Comment

ID: 6988353
Hi! You may try my dialog object I am using to provide all the my "modal" dialogs in the project.
---- Cut here dialog.js -----
//Created by Vladimir Olovyannikov
//Thanks to Dom Leonard for assistance
//dialog styles
var dlgInfo=0; //dialog for information purpose only. Displays a message and an OK button
var dlgConfirm=1;//Confirmation - displays a dialog with OK and Cancel buttons (configurable)
var dlgWarn=2;//dialog with the OK button and a warning icon
var dlgError=3;//same as dlgWarn, but instead of warning an error icon is used
var dlgNoSpec=4;//Dialog with no icon, but with the "OK" button
//browser specific
var dom=document.getElementById;
var b=chkBrw();
var Nav4 = (b=='nav4');var Nav5 = (b=='nav5'&&dom);
var IE4  = (b=='ie4'||b=='ie5'||b=='ie6');var IE5  = (b=='ie5'||b=='ie6'&&dom);
var IE6 = (b=='ie6'&&dom);
var oldBrw=(b=='old');

//Auxiliary functions
//returns true if wnd exists, valid and NOT closed
function windowExists(wnd)
 var err=false;
 var bdy=null;
 if(typeof wnd!='object') wnd=(!IE5)?eval(wnd):eval("try{wnd=eval(wnd);}catch(e){err=true;}");
 if(err||(bdy==null&&IE5)) return false;
 return(wnd!=null&&!wnd.closed&&wnd.closed!=null) ? true:false;

function deleteElement(arr,itemNo)
 if(!arr) return arr;
 return arr;
function chkBrw()//returns IE4 if the browser is MSIE ver. 4 and higher;IE5 if MSIE ver. 5 and higher, IE6 if ver. 6 and higher, Nav4 if Netscape Navigator 4.x, and Nav5 if it is Mozilla or NN6
 var app=navigator.appName;
 var n=navigator.appVersion;
 var vers=parseInt(n);
 if(app=='Netscape' && parseInt(n) == 4) return 'nav4';
 if(app=='Netscape' && parseInt(n)>4)return 'nav5';
 if(n.indexOf('MSIE 5')!=-1) return 'ie5';
 if(n.indexOf('MSIE 6')!=-1) return 'ie6';
 if(app.indexOf('Explorer')!=-1 && vers>4)return 'ie5';
 if(app.indexOf('Explorer')!=-1 && vers==4)   return 'ie4';
 if(document.all&&document.body) return IE4;
 return 'old';

/*dlg object itself
dlgmsg is a HTML to be displayed in the dialog window;
dlgcaption is a caption of the window;
dlgstyle is either predefined styles (see above), or 'custom'
rfr-the handle to the window the dialog is "belonged" to (that is the parent window for the dialog)-referrer
blockuser-if true then disables closing the dialog with the "X" button, default is false
retfunc - a function to be evaled before closing of the dialog
center - if true then the message will be centered
url - an url for a file to be used instead of the dlgmsg
name - name of the dialog object
color - color of the dialog
processunload - tells dialog to eval the retfunc if true, or ignore it otherwise
marg - top margin=0 if true, default false
customIcon - the name of the file to be used as an icon. If specified the icon for dlgstyle is ignored
OKBtn - OK button text (e.g. Proceed, etc.)
CancelBtn - same for the Cancel button
function dlg(dlgmsg,dlgcaption,dlgstyle,rfr,blockuser,retfunc,center,url,name,color,processunload,marg,customIcon,OKBtn,CancelBtn)
 this.pageLoaded=false;//auxiliary, required for NN4.xx
 this.OKBtn=OKBtn||'  OK  ';
 this.CancelBtn=CancelBtn||'  Cancel  ';
 this.margin=(marg)?'TOPMARGIN=0 MARGINHEIGHT=0':'';
 this.parentFocus=false;//set focus to parent on dialog close
 this.dependent='yes';//make the window dependent on rfr (in NN)
 this.scrollable='no';//allow scrolling
 this.resizable='no';//allow resizing
 this.isModal=checkModal;//function t check on "modalness"
 this.imgs=new Array();
 this.imgs[0] = pref+'info.gif';
 this.imgs[1] = pref+'confirm.gif';
 this.imgs[2] = pref+'warn.gif';
 this.imgs[3] = pref+'error.gif';
 this.imgs[4] = customIcon;//if any
 this.btnColor='#CFCFCF'//button frame color
 this.stl=(isNaN(dlgstyle)||(dlgstyle<0)||(dlgstyle>4)) ? -1:dlgstyle;//style of the dialog
 this.blockUserWindow=this.stl!=-1;//make it modal?'';
 this.canCreate=canCreate;//No more than one modal window for rfr can be visible
 this.getID=getWindowID;         DlgShow;
 this.setHandlers = DlgSetHandlers;//initialization of the dialog
 this.frameSet=     DlgFrameSet;//a code which writes frameset
 this.cntSrc =      DlgCntSrc;//for content
 this.btnSrc =      DlgBtnSrc;//for buttons' frame
 this.thisDlg =     this;//cross reference
 this.calc=         calcHeight;//Estimated height of the dialog
 this.drw=          drw;
 this.getResult=    DlgGetResult;//function to be executed on dialog closing
 this.unLoad=       DlgUnLoad;
 this.block=blockEvents;//blocking events for parent
 this.blockIE=blockIE;//blocking for IE-more complicated than for NN
  if(!this.canCreate()) return;
  var h=this.calc();//got estimated height
  if(this.height<150) this.height=150;//"magic" numbers, otherwise the dialog will be look awful.
  if(center==true)this.msg='<center>'+this.msg+'</center>';;//show the dialog
 return this;
function setDlgFocus()
 if(this.handle && !this.handle.closed) this.handle.focus();//focusing
function canCreate()
 if(!this.rfr) return true;
 if(! return true;
 var z;
 for(var i=0;i<;i++)
   z.setFocus();return false;
 return true;
function DlgShow()//this.handle is the handle you required
 if(!this.handle || (this.handle && this.handle.closed))
  if('') = "_" + (new Date()).valueOf();


   if(!this.left) this.left = this.rfr.screenX +((this.rfr.outerWidth - this.width) / 2);
   if(!this.tops) this.tops = this.rfr.screenY +((this.rfr.outerHeight - this.height) / 2);

   if(!this.left) this.left = (screen.width - this.width) / 2;
   if(!this.tops) this.tops = (screen.height - this.height) / 2;
  var attr=(Nav4)? "scrollbars="+this.scrollable+",dependent="+this.dependent+",screenX=" + this.left +
           ",screenY=" + this.tops + ",resizable=no,width=" +this.width +
           ",height=" + this.height: "scrollbars="+this.scrollable+",left=" + this.left + ",top=" +
           this.tops + ",width=" + this.width + ",height=" + this.height;

   var mw = new Array(); = mw;
  if(typeof this.url=='function'||typeof this.url=='object')
  {'',, attr);
  else,, attr);
  if(this.blockUserWindow) this.block();
  if(Nav4) this.handle.onload=this.handle.setTimeout('thisDlg.pageLoaded=true',1000);

function DlgSetHandlers()
 if(!windowExists(this.handle)) return 'bad';//Should never get this
 this.handle.thisDlg = this;
 if(Nav4) this.handle.onunload=this.unLoad;
 if(IE4||dom) this.handle.setTimeout("window.onunload=window.thisDlg.getResult",10);//required for NN

function drw()

function DlgFrameSet()
 var r=30;
                            + '<frameset framespacing="0" border="false" '
                            + 'rows="'+(this.height-r)+','+r+'"'
                            + ' frameborder="0">'
                            + '<frame name="cnt" src="javascript:document.write(parent.thisDlg.cntSrc());document.close()" noresize>'
                            + '<frame name="buttons" src="javascript:document.write(parent.thisDlg.btnSrc());document.close()" scrolling="no" noresize>'
                            + '<noframes>'
                            + '<body>'
                            + '<p>This page uses frames, but your browser does not support them.</p>'
                            + '</body></noframes>'
                            + '</frameset></html>');

function DlgCntSrc()
 var s=strReplace(dummyHeader,'%title%','');
 var img='';
 case 0: img=this.imgs[0];break;
 case 1: img=this.imgs[1];break;
 case 2: img=this.imgs[2];break;
 case 3: img=this.imgs[3];break;
 case 4: img=this.imgs[4];break;
 s+='<BODY '+this.margin+' BGCOLOR="'+this.dlgColor+'">';
 s+='<table width="100%" border="0" cellspacing="1" cellpadding="1">';
 s+='<tr valign="middle">';
  s+='<td width="8%" height="67" align="right" valign="middle">';
  s+='<IMG NAME="icon" SRC="'+img+'" WIDTH="32" HEIGHT="32">';
  s+='<td width="1%">&nbsp;</td>';
 var w=(!img)?"100%":"82%";
 s+='<td width='+w+'" height="20%" valign="baseline">';
 return s;
function DlgBtnSrc()
 var s =strReplace(dummyHeader,'%title%','')
 + '<BODY TOPMARGIN=2 MARGINHEIGHT=4 BGCOLOR="'+this.btnColor+'">'
 + '<CENTER><form action=""><input type="button" name="OK"'
 + '    value="'+this.OKBtn+'" onclick=top.thisDlg.getResult(0)>';
  s += '&nbsp;<input type="button" name="Cancel" value="'+this.CancelBtn+'" onclick=top.thisDlg.getResult(1)>';
 s+=  '</form></CENTER></body></html>';
 return s;
function getWindowID()
 var z;
 if(! return null;
 for(var i=0;i<;i++)
   return i;
 return -1;
function DlgGetResult(value)//function called when the dialog is being closed
 var m=null; var d=null;

  return -1;
 d = this.thisDlg;
 m = (this.handle)?this.handle:this;

  if(Nav4) m.onunload=null;
//IE5 and higher requires this weird error catching
  if((IE4||dom)&&!IE5) m.document.body.onunload=null;
 {,d.getID());//deleting from an array of windows for the parent, then unblock
  if(d.blockUser && value==null) return false;
 d.OK=true;//OK means that all the finalizing procedures are completed.
 if(d.onClose!=null) eval(d.onClose);//if we have to do something on close
   if(!mw1) mw1=new Array();
   for(var i=0;i<mw1.length;i++)
  if(m && !m.closed)
  if(d.retFunc!=null) eval(d.retFunc(value));
 return d.result;
function calcHeight()
 var h=this.msg.toString().toLowerCase();
 var i=0;

//blocks IE parent windows (links, etc.) by assigning checkModal event to click
function blockIE(r,bMode)
 var errOccured=false;
 var i,frm;
  var bdy=null;
  if(errOccured) break;
  if(frm.frames.length>0) this.blockIE(frm,bMode);

function blockEvents()
 var r=this.rfr;
  r.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP | Event.FOCUS);
 if(IE4) this.blockIE(r,true);
 r.onclick = checkModal;
 r.window.onfocus = checkModal;
 return this;
function unblockEvents()
 var r=this.rfr||this.thisDlg.rfr;
 r.onclick = this.oldOnClick;
  r.releaseEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP | Event.FOCUS);
 if(IE4) this.blockIE(r,false);
 r.onfocus = this.oldOnFocus;
 return this;
function checkModal()
 if(! false;
 if(!wnd) return false;
  wnd.getResult(1);return false;
 if(wnd && !wnd.handle.closed) wnd.handle.focus();
 else if(Nav4) if(wnd.stl==-1) wnd.getResult(1);
 if(!wnd) return false;
 return false;
function DlgUnLoad()
 var d = this.thisDlg;
 var w=this;
 if(!d.pageLoaded) return true;
 if(d.OK) return true;
 if(!d.blockUser) d.getResult((d.processUnload)?1:-1);
 return true;
-------------- Finish cut ----------------------------
you may wish to try this small example with the dialogs.js I provided:
<script language="Javascript" src="dialogs.js"></script>
<script language="javascript>
function showWarn(errMsg,caption,icon,wnd,marg,okB,cancelB)
 var w=null;
  if(>0) return void(0);
 w=new dlg(errMsg,caption,icon,wnd,false,null,null,null,null,null,null,marg,null,okB,cancelB);
 return void(0);
 <A href="javascript:showWarn('This is a message','Info',dlgInfo,window)">Click here</A>
I hope, I missed nothing when pasting from my code.


Author Comment

ID: 6988614
Vladimir - Can this dialog be closed by the parent? If so which method will close it?
I need a dialog with no buttons that is opened by a parent while some processing is happening and then closed by the parent when the processing has finished. Will your example fulfil this?
I am having trouble running your example. I saved the javascript to a file but am getting errors.
i think it is because of the cut and paste from the browser.
Can you please send me the text of the .js file by email to
Thanks for your great answer though.

Author Comment

ID: 6988633
Vladimir - I am now getting the following error:

"dummyHeader is Undefined"

the dummyHeader variable appears in the javascript but is never defined.

Dev C.
LVL 18

Expert Comment

ID: 6991921
that's ok, didn't really want any response....i do this just to hear myself type.

Expert Comment

ID: 6992167
Dev C.,
1. No problem - the parent will use the getResult() method to close the dialog. Use "custom" as a dialog style if you wish to construct your own dialog, not the default one (i.e. dlgInfo, dlgWarn, dlgError). Then you should set an url parameter (see my code I posted before), and use show() method to invoke your modal dialog. If you wish I can post an example of a modal window (calendar) code utilizing Netscape's calendar Js-code which is displayed using the dialog object, and works in NN and IE with no differences at all.

2. Probably, there was something I missed copy-pasting.
The dummyHeader should be:
var dummyHeader='<HTML><HEAD><TITLE>%title%</TITLE></HEAD>';
You will need then the function strReplace (actually, I suspect it is posible to use a native function, but I missed one in Netscape(?), so here it is:
 src=source string
 ch = character(s) to replace
 withCh=character(s) to be used as a replace string
 Returns: a string where all ch are replaced with withCh
function strReplace(src,ch,withCh)
 if(!src) src='';
 if(!ch || ch==withCh || ch=='' || src=='')  return src;
 return src;

You may write me to, then I can send you a js-file, not the copy-paste result :)

LVL 12

Expert Comment

ID: 8240197
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

Please leave any comments here within the next seven days.
EE Cleanup Volunteer

Accepted Solution

SpideyMod earned 0 total points
ID: 8303765
per recommendation

Community Support Moderator @Experts Exchange

Featured Post

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Marketers need statistics and metrics like everybody else needs oxygen. In this article we explain how to enable marketing campaign statistics for Microsoft Exchange mail.
Read this article and get to know some best tips for outsourcing client PPC work to a white label PPC agency.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question