Solved

Force Popup Window to stay visible

Posted on 2002-07-30
17
1,456 Views
Last Modified: 2007-12-19
Hi... I'm trying to get a popup window to stay displayed - I don't want the user to be able to minimize the window - I want them to explicitly be forced to close it.

The popup form will have form elements. I've tried using

<body onblur="javascript:window.focus()">  in the popup window... But if I click on any application running on the task bar, I can successfully minimize the popup.

I can also then click on the parent window and not even be aware of the popup window being already opened.
0
Comment
Question by:adumas77
  • 7
  • 5
  • 3
  • +1
17 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7188820
You can create a "modal" window, here is a sample that I found:

 
<script LANGUAGE="JavaScript">
// Browser Detection
isMac = (navigator.appVersion.indexOf("Mac")!=-1) ? true : false;
NS4 = (document.layers) ? true : false;
IEmac = ((document.all)&&(isMac)) ? true : false;
IE4plus = (document.all) ? true : false;
IE4 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 4.")!=-1)) ? true : false;
IE5 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 5.")!=-1)) ? true : false;
ver4 = (NS4 || IE4plus) ? true : false;
NS6 = (!document.layers) && (navigator.userAgent.indexOf('Netscape')!=-1)?true:false;

// Body onload utility (supports multiple onload functions)
var gSafeOnload = new Array();
function SafeAddOnload(f)
{
      if (IEmac && IE4)  // IE 4.5 blows out on testing window.onload
      {
            window.onload = SafeOnload;
            gSafeOnload[gSafeOnload.length] = f;
      }
      else if (window.onload)
      {
            if (window.onload != SafeOnload)
            {
                  gSafeOnload[0] = window.onload;
                  window.onload = SafeOnload;
            }            
            gSafeOnload[gSafeOnload.length] = f;
      }
      else
            window.onload = f;
}
function SafeOnload()
{
      for (var i=0;i<gSafeOnload.length;i++)
            gSafeOnload[i]();
}

function isInt(numIn)
{
      var checknum = parseInt(numIn);
      return !isNaN(checknum);
}

// Make an object visible
function showObject(obj)
{
        if (NS4) obj.visibility = "show";
        else if (IE4plus||NS6) obj.visibility = "visible";
}

// Hides an object
function hideObject(obj)
{
        if (NS4) obj.visibility = "hide";
        else if (IE4plus||NS6) obj.visibility = "hidden";
}

// Move a layer
function moveTo(obj,xL,yL)
{
        obj.left = xL;
        obj.top = yL;
}

// Browser window width
function getWindowWidth()
{
      if (NS4 || NS6)
            return window.innerWidth;
      else if (IE4plus)
            return document.body.clientWidth;
}

function getObjLoc(oIn)
{
      var oOut = new Object();
      oOut.top = 0;
      oOut.left = 0;

      if ((IE4plus && !isMac) || (IEmac && IE5) )
      {
            oOut.left = oIn.offsetLeft;
            oOut.top = oIn.offsetTop;
            var newp = oIn.offsetParent;
            while(newp != null)
            {
                  oOut.left += newp.offsetLeft;
                  oOut.top += newp.offsetTop;
                  newp = newp.offsetParent;
            }
            if (IEmac)
            {      
                  oOut.left += parseInt(document.body.leftMargin);
                  oOut.top +=  parseInt(document.body.topMargin);
            }
      }
      else if (NS4)
      {
            oOut.left = oIn.x;
            oOut.top = oIn.y;
      }
      else if (isMac && IE4)
      {
            var el = oIn;
            do
            {      
                  if (isInt(el.offsetTop))
                        oOut.top += el.offsetTop;
                  if (isInt(el.offsetLeft))
                        oOut.left += el.offsetLeft;
                  el = el.parentElement;
            } while (el.tagName != "BODY");
            if (navigator.appVersion.indexOf("4.5")>=0)
                  oOut.top = oOut.top - 15;
      }
      else if (NS6)
      {
            var b=document.getElementsByTagName('body')[0];
            oOut.left = oIn.offsetLeft+b.offsetLeft;
            oOut.top = oIn.offsetTop+b.offsetTop;
      }
      return oOut;
}


function createLayer(name,left,top,width,height,html)
{
      var nL;
      
      if (IE4plus)
      {
            var divhtml = '<div id=' + name + ' style="visibility:hidden;left:' + left +
                  'px;top:' + top + 'px;width:' + width +
                  'px;height:' + height + 'px;position:absolute">' +
                  html + '</div>';
            document.body.insertAdjacentHTML('beforeEnd', divhtml);
            nL = document.all[name].style
      }
      else if (NS4)
      {
            nL=new Layer(width);
            nL.name = name;
            nL.left=left;
            nL.top=top;
            nL.clip.width=width;
            nL.clip.height=height;
            nL.document.open();
            nL.document.write(html);
            nL.document.close();
      }
      else if (NS6)
      {
            var nL = document.createElement("DIV");
            nL.innerHTML = html;
            var mybody=document.body;
            mybody.appendChild(nL);
            nL.style.position = "absolute";
            nL.style.visibility = "hidden";
            nL.style.left = left;
            nL.style.top = top;
            nL.style.width = width;
            nL.style.height = height;
            nL.id = name;
            nL = nL.style;
      }
      return nL;
}

function DMD_GetContentHTML()
{
      var html = '<center><I><FONT color=white size="3"><STRONG>Keep Up-To-Date</STRONG></FONT></I><BR>';
      html += '<FONT color=white size="3"><STRONG>The JavaScript<BR>Newsletter</STRONG></FONT><BR>';
      html += '<IMG src="images/spacer.gif" width=2 height=8 border=0><BR>';
      html += '<a href="http://javascript.about.com/gi/pages/mmail.htm"><IMG src="images/subscribe.gif" width=66 height=17 border=0></a></center>';
      return html;
}

function DMD_GetWindowHTML()
{
      var html = '<map name="DMDMap">';
      html += '<area href="javascript:gDialog.ShowLayers(false)" shape="rect" coords="' + (this.width - 24) + ', 0, ' + this.width + ', 18"></map>';
      html += '<img src="' + this.imgURL + '" width="' + this.width + '" height="' + this.height + '" border="0" usemap="#DMDMap" >';

      return html;
}

function createOverlayLayer()
{
      var nL;
      var left = 0;
      var top = 0;
      var name = "overlay";
      var html = "";
      
      if (IE4plus)
      {
            var width = isMac ? document.body.offsetWidth : document.body.scrollWidth;
            var height = isMac ? document.body.offsetHeight : document.body.scrollHeight;
            var divhtml = '<div  id=' + name + ' style="visibility:visible;left:' + left +
                  'px;top:' + top + 'px;width:' + width +
                  'px;height:' + height + 'px;position:absolute; background: url(images/transoverlay.gif) repeat">' +
                  html + '</div>';
            document.body.insertAdjacentHTML('beforeEnd', divhtml);
            nL = document.all[name].style
      }
      else if (NS4)
      {
            var width = document.width;
            var height = document.height;
            nL=new Layer(width);
            nL.name = name;
            nL.left=left;
            nL.top=top;
            nL.height = height;
            nL.clip.width = width;
            nL.clip.height = height;
            nL.visibility = "show";
            nL.background = "images/transoverlay.gif";
            nL.document.open();
            nL.document.write('<table background="images/transoverlay.gif"><tr><td><img src="images/spacer.gif" width="' + width + '" height="' + height +'"></td></tr></table>');
            nL.document.close();
      }
      else if (NS6)
      {
            var nL = document.createElement("DIV");
            nL.innerHTML = "";
            var mybody=document.body;
            mybody.appendChild(nL);
            nL.style.position = "absolute";
            nL.style.visibility = "visible";
            nL.style.left = left;
            nL.style.top = top;
            nL.style.width = document.body.offsetWidth+document.body.offsetLeft;
            nL.style.height = document.body.offsetHeight+document.body.offsetTop;
            nL.style.background = "url(images/transoverlay.gif)";
            nL.id = name;
            nL = nL.style;
      }
      return nL;
}

function getCenter()
{
      var clientHeight;
      var clientWidth;
      var docTop;
      var docLeft;
      
    if (IE4plus)
    {
      clientHeight = document.body.clientHeight;
      clientWidth = document.body.clientWidth;
      docTop = document.body.scrollTop;
      docLeft = document.body.scrollLeft;
    }
    else if (NS4 || NS6)
    {
      // Fudge for the scrollbars
      clientHeight = window.innerHeight -20;
      clientWidth = window.innerWidth - 20;
      docTop = window.pageYOffset;
      docLeft = window.pageXOffset;
    }
   
    var loc = new Object();
    loc.x = docLeft + clientWidth/2;
    loc.y = docTop + clientHeight/2;
    return loc;
}

function DMD_Display()
{
      if (IE4plus || NS4 || NS6)
      {
            if (!this.dvo)
                  this.dvo = createOverlayLayer();
            
            if (!this.dv)
                  this.dv = createLayer("dmdwindow",0,0,this.width,this.height,this.GetWindowHTML());

            if (!this.dvc)
                  this.dvc = createLayer("dmdcontent",0,0,this.width-4,this.height-18,this.GetContentHTML());

            var loc = getCenter();
            this.dv.left = loc.x - this.width/2;
            this.dv.top = loc.y - this.height/2;

            this.dvc.left = loc.x + 4 - this.width/2;
            this.dvc.top = loc.y + 18 - this.height/2;
            this.ShowLayers(true);
      }
}


function DMD_ShowLayers(show)
{
      if (show)
      {
            showObject(this.dv);
            showObject(this.dvc);
            showObject(this.dvo);
      }
      else
      {
            hideObject(this.dv);
            hideObject(this.dvc);      
            hideObject(this.dvo);      
      }
}

function DHTMLModalDialog(imageURL,width,height)
{
      this.width = width;
      this.height = height;
      this.imgURL = imageURL;
      
      this.dv = null;
      this.dvc = null;
      this.dvo = null;
      
      this.GetWindowHTML = DMD_GetWindowHTML;
      this.GetContentHTML = DMD_GetContentHTML;
      this.ShowLayers = DMD_ShowLayers;
      this.Display = DMD_Display
}

function HandleResize()
{
      location.reload();
      return false;
}

if (NS4)
{
      window.captureEvents(Event.RESIZE);
      window.onresize = HandleResize;
}

var gDialog = new DHTMLModalDialog("images/popinside.gif",145,114);

</script>
 
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7188822
You can test it like this:

<p><a href="javascript:void(gDialog.Display())">Click to show
DHTML Modal Dialog</a></p>
   
0
 

Author Comment

by:adumas77
ID: 7188902
Hi... I tried reading through this example - there's a lot of things going on...

Is there a more simple/short version?
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7189784
____________________________________
the calling page

<html>
<head>
</head>
<body onload="window.open('newwin.html','','')">
</body>
</html>






___________________________________
code of newwin.html

<html>
<head>
</head>
<body onblur="this.focus()">
</body>
</html>
0
 

Author Comment

by:adumas77
ID: 7190803
Well that doesn't work because the popup has form elements in it.

This code prevents the user from entering in any of the fields...
 
Minimally, I want to prevent the user from accidentally minimizing or losing focus on the window. If they click back on the parent window and the popup window exists, I want it to brought to focus.

Can this be done?  
0
 

Expert Comment

by:seabubblefish
ID: 7191104
For "fritz_the_blank" solution, I don't know whether it works or not. It is because it is very complex.

The following is my solution. I don't know whether it suits your need. I tested it works in my PC. It works. If the following coding is not worked in your PC. You can try to set longer time for setTimeout function such as 'setTimeout( "self.focus()", 2000 );'.



<html>
<head>
<script language=JavaScript>
<!--
function winOnTop()
{
     self.focus();
     setTimeout( "self.focus()", 1000 );
}
//-->
</script>
</head>
<body onLoad="winOnTop()" onBlur="winOnTop()">
Content of popup Window.
</body>
</html>
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7191136
hi seabubblefish,
i see that you are new at EE.
we here generally post only as comments
and not as answers, because proposing
an answer locks the Q, therefore its not
good for the questioner.
so in future please post as comments.
thanks.
lexxwern
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7191187
I wonder if this won't work on the popup--it is similar but not exactly the same as suggestions above:

<BODY onBlur="self.focus()">


Give it a try just in case.

Fritz the Blank
0
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

 
LVL 12

Expert Comment

by:lexxwern
ID: 7191206
no doesn't work,

now this is an interesting problem, ill keep trying adumas77
0
 

Author Comment

by:adumas77
ID: 7191497
Proposed comment doesn't work...
0
 

Expert Comment

by:seabubblefish
ID: 7193332
Sorry about that.
But I think I will not come frequently later.
Sorry for making all of you inconvinent.
0
 

Author Comment

by:adumas77
ID: 7196030
Any luck anyone....  lexxwern, have you found out anything?
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7196089
you bet i got a workaround, try this,

<html>
<head>
<script language="javascript">
var GiveFocus="FALSE";
function CheckFocus()
{
 if(GiveFocus == "FALSE")
 {
   window.focus();
 }
 else{
  return;
 }
}

function Change(obj)
{
 GiveFocus="TRUE";
 CheckFocus();
 obj.focus();
}
</script>
</head>
<body onblur="CheckFocus()">
<form name="myform">
<input type="text" name="inputone" onclick="Change(this)" onblur="GiveFocus='FALSE'"/>
<input type="text" name="inputtwo" onclick="Change(this)" onblur="GiveFocus='FALSE'"/>
<input type="text" name="inputthree" onclick="Change(this)" onblur="GiveFocus='FALSE'"/>
<input type="text" name="inputfour" onclick="Change(this)" onblur="GiveFocus='FALSE'"/>
<input type="text" name="inputfive" onclick="Change(this)" onblur="GiveFocus='FALSE'"/>
</body>
</html>






till now the popup can lose focus only when the person is typing the form. and the person can indeed type.

ill expect 100 points and an A! :-)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7196159
this should work perfect...


____code of the popup window______
<html>
<head>
<script language="javascript">
var GiveFocus="FALSE";
function CheckFocus()
{
 if(GiveFocus == "FALSE")
 {
   window.focus();
 }
 else{
  return;
 }
}

function Change(obj)
{
 GiveFocus="TRUE";
 CheckFocus();
 obj.focus();
}
</script>
</head>
<body onblur="CheckFocus()">
<form name="myform">
<input type="text" name="inputone" onclick="Change(this)" onblur="GiveFocus='FALSE';CheckFocus();"/>
<input type="text" name="inputtwo" onclick="Change(this)" onblur="GiveFocus='FALSE';CheckFocus();"/>
<input type="text" name="inputthree" onclick="Change(this)" onblur="GiveFocus='FALSE';CheckFocus();"/>
<input type="text" name="inputfour" onclick="Change(this)" onblur="GiveFocus='FALSE';CheckFocus();"/>
<input type="text" name="inputfive" onclick="Change(this)" onblur="GiveFocus='FALSE';CheckFocus();"/>
</body>
</html>
0
 

Author Comment

by:adumas77
ID: 7204075
Awesome.... But needs a "little" tweek.
 
If the user clicks on another active application on the task bar - it will minimize the popup window....

Then if they click back on the parent window, the minimized popup window stays hidden... I am even able to go and do other things without even knowing that it is still hidden.

Any way to give focus back to the popup window when the user clicks on the parent via the task bar?
0
 
LVL 12

Accepted Solution

by:
lexxwern earned 50 total points
ID: 7205722
im sorry but that is not possible, you cant do the little tweak that you need... sorry..
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7214212
glad to help, thanks for the A!

lexxwern
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

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

707 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

16 Experts available now in Live!

Get 1:1 Help Now