Go Premium for a chance to win a PS4. Enter to Win

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

Force Popup Window to stay visible

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
adumas77
Asked:
adumas77
  • 7
  • 5
  • 3
  • +1
1 Solution
 
fritz_the_blankCommented:
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
 
fritz_the_blankCommented:
You can test it like this:

<p><a href="javascript:void(gDialog.Display())">Click to show
DHTML Modal Dialog</a></p>
   
0
 
adumas77Author Commented:
Hi... I tried reading through this example - there's a lot of things going on...

Is there a more simple/short version?
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!

 
lexxwernCommented:
____________________________________
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
 
adumas77Author Commented:
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
 
seabubblefishCommented:
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
 
lexxwernCommented:
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
 
fritz_the_blankCommented:
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
 
lexxwernCommented:
no doesn't work,

now this is an interesting problem, ill keep trying adumas77
0
 
adumas77Author Commented:
Proposed comment doesn't work...
0
 
seabubblefishCommented:
Sorry about that.
But I think I will not come frequently later.
Sorry for making all of you inconvinent.
0
 
adumas77Author Commented:
Any luck anyone....  lexxwern, have you found out anything?
0
 
lexxwernCommented:
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
 
lexxwernCommented:
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
 
adumas77Author Commented:
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
 
lexxwernCommented:
im sorry but that is not possible, you cant do the little tweak that you need... sorry..
0
 
lexxwernCommented:
glad to help, thanks for the A!

lexxwern
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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