Solved

Open and close pop-up window

Posted on 2002-05-01
12
377 Views
Last Modified: 2013-11-28
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
Comment
Question by:devc33
  • 3
  • 2
  • 2
  • +5
12 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 6983952
0
 
LVL 3

Expert Comment

by:tejaspurani
ID: 6984084
0
 
LVL 22

Expert Comment

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

CJ
0
 

Author Comment

by:devc33
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?
0
 
LVL 18

Expert Comment

by:bruno
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?


BRUNO
0
 

Expert Comment

by:olovyan
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');
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

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

Author Comment

by:devc33
ID: 6988633
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
 
LVL 18

Expert Comment

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

Expert Comment

by:olovyan
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:
/*
 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
 
LVL 12

Expert Comment

by:ahosang
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:

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
 

Accepted Solution

by:
SpideyMod earned 0 total points
ID: 8303765
per recommendation

SpideyMod
Community Support Moderator @Experts Exchange
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now