Force Popup Window to stay visible

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>
 

You can test it like this:

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

Hi... I tried reading through this example - there's a lot of things going on...

Is there a more simple/short version?

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

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?  

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>

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

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

no doesn't work,

now this is an interesting problem, ill keep trying adumas77

Proposed comment doesn't work...

Sorry about that.
But I think I will not come frequently later.
Sorry for making all of you inconvinent.

Any luck anyone....  lexxwern, have you found out anything?

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! :-)

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>

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?

glad to help, thanks for the A!

lexxwern