asked on

Open and close pop-up window

I have a jsp page that opens a pop-up window and closes it using WindowHandle = window.open() 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 = window.open();
waitScreenWindowHandle.location='/waitscreen.html';
}

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

Any ideas on how to make it modal?

knightEknight

Here is one to look at:

http://developer.netscape.com/viewsource/goodman_modal/goodman_modal.html

tejaspurani

try this,
T.P.

https://www.experts-exchange.com/javascript/Q.20286574.html

CJ_S

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

CJ

devc33

ASKER

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?

bruno

>>
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?

BRUNO

olovyan

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');
pref="http://myhost.host.com/imgs/";

//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(IE5&&!err)eval("try{bdy=wnd.document.body;}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;
if(arr[itemNo])
{
arr[itemNo]="";arr=pack(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.msg=dlgmsg;
this.dlgCaption=dlgcaption;
this.result=1;
this.pageLoaded=false;//auxiliary, required for NN4.xx
this.rfr=rfr;
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.width=400;
this.dependent='yes';//make the window dependent on rfr (in NN)
this.scrollable='no';//allow scrolling
this.resizable='no';//allow resizing
this.oldOnFocus=null;
this.oldOnClick=null;
this.blockUser=blockuser||false;
this.blocked=false;
this.imgs=null;
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.retFunc=retfunc;
this.height=200;
this.onClose=null;
this.processUnload=processunload;
this.dlgColor=(color)?color:'#FFFFFF';
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.name=(name)?name:'';
this.OK=false;
this.canCreate=canCreate;//No more than one modal window for rfr can be visible
this.setFocus=setDlgFocus;
this.getID=getWindowID;
this.show= 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
this.unBlock=unblockEvents;//unblocking
this.url=url||((this.stl!=-1)?this.drw:null);
if(this.stl!=-1)
{
if(!this.canCreate()) return;
var h=this.calc();//got estimated height
this.height=(h*15<screen.availHeight-100)?h*15:screen.availHeight-100;
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>';
this.show();//show the dialog
}
return this;
}
function setDlgFocus()
{
if(this.handle && !this.handle.closed) this.handle.focus();//focusing
return;
}
function canCreate()
{
if(!this.rfr) return true;
if(!this.rfr.mw) return true;
var z;
for(var i=0;i<this.rfr.mw.length;i++)
{
z=this.rfr.mw[i];
if(z.blocked)
{
z.setFocus();return false;
}
}
return true;
}
function DlgShow()//this.handle is the handle you required
{
if(!this.handle || (this.handle && this.handle.closed))
{
if(this.name=='') this.name = "_" + (new Date()).valueOf();

if(Nav4)
{

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);
}
else
{

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;
attr+=',resizable='+this.resizable;

if(!this.rfr.mw)
{
var mw = new Array();
this.rfr.mw = mw;
}
this.rfr.mw[this.rfr.mw.length]=this;
if(typeof this.url=='function'||typeof this.url=='object')
{
this.handle=this.rfr.window.open('', this.name, attr);
eval(this.url());
}
else
this.handle=this.rfr.window.open(this.url, this.name, attr);
this.setHandlers();
if(this.blockUserWindow) this.block();
if(Nav4) this.handle.onload=this.handle.setTimeout('thisDlg.pageLoaded=true',1000);
}
return;
}

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()
{
this.frameSet();
return;
}

function DlgFrameSet()
{
var r=30;
this.handle.document.write(strReplace(dummyHeader,'%title%',this.dlgCaption));
this.handle.thisDlg=this;
this.handle.document.write('</HEAD>'
+ '<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>');
this.handle.document.close();
this.parentFocus=true;
}

function DlgCntSrc()
{
var s=strReplace(dummyHeader,'%title%','');
var img='';
switch(this.stl)
{
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+=(Nav4)?'':webSt;
s+='<BODY '+this.margin+' BGCOLOR="'+this.dlgColor+'">';
s+='<table width="100%" border="0" cellspacing="1" cellpadding="1">';
s+='<tr valign="middle">';
if(img)
{
s+='<td width="8%" height="67" align="right" valign="middle">';
s+='<IMG NAME="icon" SRC="'+img+'" WIDTH="32" HEIGHT="32">';
s+='</td>';
s+='<td width="1%"> </td>';
}
var w=(!img)?"100%":"82%";
s+='<td width='+w+'" height="20%" valign="baseline">';
s+=this.msg+'</td></tr></table></body></html>';
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)>';
if(this.stl==dlgConfirm)
s += ' <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(!this.rfr.mw) return null;
for(var i=0;i<this.rfr.mw.length;i++)
{
z=this.rfr.mw[i];
if(z.dlgCaption==this.dlgCaption&&z.msg==this.msg&&z.stl==this.stl)
return i;
}
return -1;
}
function DlgGetResult(value)//function called when the dialog is being closed
{
var m=null; var d=null;

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

if(m&&!d.errOccured)
{
if(Nav4) m.onunload=null;
//IE5 and higher requires this weird error catching
if(IE5)
eval('try{m.document.body.onunload=null;}catch(e){d.errOccured=true;this.errOccured=true;}');
if((IE4||dom)&&!IE5) m.document.body.onunload=null;
}
d.result=value;
if(windowExists(d.rfr))
{
d.rfr.mw=deleteElement(d.rfr.mw,d.getID());//deleting from an array of windows for the parent, then unblock
if(d.blockUser && value==null) return false;
d.unBlock();
d.rfr.onfocus=null;
}
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
d.onClose=null;
if(!this.errOccured)
if(this.dependent=='no'||(IE4||dom))
{
var mw1=m.mw;
if(!mw1) mw1=new Array();
for(var i=0;i<mw1.length;i++)
{
mw1[i].onClose=null;(Nav4)?mw1[i].handle.onunload=null:mw1[i].handle.document.body.onunload=null;
mw1[i].parentFocus=false;
mw1[i].handle.close();
}
}
if(!this.errOccured)
if(m && !m.closed)
m.close();
if(d.parentFocus)
d.rfr.focus();
if(value>=0||d.processUnload)
if(d.retFunc!=null) eval(d.retFunc(value));
return d.result;
}
function calcHeight()
{
var h=this.msg.toString().toLowerCase();
var i=0;
while(h.indexOf('<br>')!=-1)
{
i++;
h=h.substr(0,h.indexOf('<br>'))+h.substr(h.indexOf('<br>')+4,h.length);
}
while(h.indexOf('<hr>')!=-1)
{
i++;i++;i++;i++;
h=h.substr(0,h.indexOf('<hr>'))+h.substr(h.indexOf('<hr>')+4,h.length);
}
while(h.indexOf('<tr>')!=-1)
{
i++;i++;i++;i++;i++;
h=h.substr(0,h.indexOf('<tr>'))+h.substr(h.indexOf('<tr>')+4,h.length);
}
return(i>0)?i:1;
}

//blocks IE parent windows (links, etc.) by assigning checkModal event to click
function blockIE(r,bMode)
{
var errOccured=false;
var i,frm;
for(i=0;i<r.frames.length;i++)
{
frm=r.frames[i];
var bdy=null;
if(IE5)eval("try{bdy=frm.document.body;}catch(e){errOccured=true;}");
if(errOccured) break;
if(!bdy)
{
this.handle.r=r;
this.handle.bm=bMode;
this.handle.setTimeout('thisDlg.blockIE(r,bm)',10);
return;
}
frm.document.body.onclick=(bMode)?checkModal:null;
frm.document.body.onfocus=(bMode)?checkModal:null;
frm.document.body.mw=bMode?r.mw:null;
frm.mw=bMode?r.mw:null;
if(frm.frames.length>0) this.blockIE(frm,bMode);
}
if(r.document.body)
{
r.document.body.onclick=(bMode)?checkModal:null;
r.document.body.onfocus=(bMode)?checkModal:null;
r.document.body.mw=bMode?r.mw:null;
}
}

function blockEvents()
{
var r=this.rfr;
this.oldOnClick=r.onclick;
if(Nav4)
{
r.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP | Event.FOCUS);
}
if(IE4) this.blockIE(r,true);
r.onclick = checkModal;
this.oldOnFocus=r.onfocus;
r.window.onfocus = checkModal;
this.blocked=true;
return this;
}
function unblockEvents()
{
var r=this.rfr||this.thisDlg.rfr;
r.onclick = this.oldOnClick;
if(Nav4)
{
r.releaseEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP | Event.FOCUS);
}
if(IE4) this.blockIE(r,false);
r.onfocus = this.oldOnFocus;
this.blocked=false;
return this;
}
function checkModal()
{
if(!this.mw)return false;
var wnd=this.mw[this.mw.length-1];
if(!wnd) return false;
if(!windowExists(wnd.rfr)||!windowExists(wnd.handle))
{
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);
if(d.blockUser)
{
d.rfr.mw=deleteElement(d.rfr.mw,d.getID());
d.handle=null;
d.show();
}
return true;
}
-------------- Finish cut ----------------------------
you may wish to try this small example with the dialogs.js I provided:
<html>
<head>
<script language="Javascript" src="dialogs.js"></script>
<script language="javascript>
function showWarn(errMsg,caption,icon,wnd,marg,okB,cancelB)
{
var w=null;
if(wnd.mw)
{
if(wnd.mw.length>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);
}
</script>
</head>
<body>
<A href="javascript:showWarn('This is a message','Info',dlgInfo,window)">Click here</A>
</body>
</html>
I hope, I missed nothing when pasting from my code.

Cheers,
Vladimir

devc33

ASKER

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 devc33@yahoo.co.uk???
Thanks for your great answer though.
Dev.

devc33

ASKER

Vladimir - I am now getting the following error:

"dummyHeader is Undefined"

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

Cheers
Dev C.

bruno

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

olovyan

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:
/*
strReplace:
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;
while(src.indexOf(ch)!=-1)
{
src=src.substr(0,src.indexOf(ch))+withCh+src.substr(src.indexOf(ch)+ch.length,src.length);
}
return src;
}

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

Cheers,
Vladimir.

ahosang

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:

PAQ
Please leave any comments here within the next seven days.

PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

ahosang
EE Cleanup Volunteer

ASKER CERTIFIED SOLUTION

SpideyMod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial