[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 390
  • Last Modified:

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?
0
devc33
Asked:
devc33
  • 3
  • 2
  • 2
  • +5
1 Solution
 
knightEknightCommented:
0
 
tejaspuraniCommented:
0
 
CJ_SCommented:
It can't be closed by the calling page anyway. It is modal!!

CJ
0
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!

 
devc33Author Commented:
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?
0
 
brunoCommented:
>>
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
0
 
olovyanCommented:
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%">&nbsp;</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 += '&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(!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
0
 
devc33Author Commented:
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.
0
 
devc33Author Commented:
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.
0
 
brunoCommented:
that's ok, didn't really want any response....i do this just to hear myself type.
0
 
olovyanCommented:
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.
0
 
ahosangCommented:
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
0
 
SpideyModCommented:
per recommendation

SpideyMod
Community Support Moderator @Experts Exchange
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
  • +5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now