popup window to front

how do I bring a popup window to the front of the other pages in javascript?
designaireAsked:
Who is Participating?
 
kadabaConnect With a Mentor Commented:
0
 
ViRoguesCommented:
Do you have any existing code? Or do you want the entire code, ready to use?
0
 
remorinaConnect With a Mentor Commented:
Try the below technique, it sets the focus to your popup upon launch then it sets the focus back if your window lost focus, keeping it ontop
http://javascript.internet.com/page-details/top-window.html

Have you also considered displaying a popup style div ?
You can try the below simple example which will display a popup style div.



<html>
  <head>
 
    <style type="text/css">

      .popup {
        border: solid 1px #333;
        font-family: Tahoma;
        font-size: 12px;
        display: none;
        position: absolute;
        z-index: 60;
      }

      .popuptitle {
        position: relative;
        background: blue;
        color: white;
        font-weight: bold;
        height: 15px;
        padding: 5px;
      }
     
      .popuptitle input {
        position: absolute;
        font-size: 75%;
        right: 2px;
        top: 2px;
      }
     
      .popupbody {
        background: #ddd;
        padding: 5px;
        text-align: center;
      }

      #popup1 { top: 100px; left: 50px; width: 510px }
      #popup1 iframe { width: 500px; height: 400px }

    </style>

    <script type="text/javascript">

      function popupWindow(o,u)
      {
        // o - Object to display.
        // u - URL to display, null = hide popup.
     
        var obj = document.getElementById(o);
        if(u)
        {
          obj.style.display = 'block';
          window.open(u,o)
        }
        else
          obj.style.display = 'none';
      }

    </script>

  </head>
  <body>

    <h1>Popup Style Window Using Elements</h1>

    <input type="button" value="Show Popup 1" onClick="popupWindow('popup1','http://www.google.com/');"/>

    <div id="popup1" class="popup">
      <div class="popuptitle">Popup 1<input type="button" value="Close" onClick="popupWindow('popup1');"/></div>
      <iframe name="popup1" class="popupbody" frameborder="0"></iframe>
    </div>

  </body>

</html>

Open in new window

0
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.

 
designaireAuthor Commented:
I ended up using this but the popup window doesn't stay in front.

    <!--Hide script from old browsers
function newWindow(newContent)
  {
winContent = window.open(newContent, 'nextWin', 'right=300,top=150,width=890,height=757,toolbar=no,scrollbars=no,resizable=yes')
winContent.moveTo(200,150);
winContent.focus()
  }
 
javascript:newWindow('document_01.htm')
0
 
remorinaConnect With a Mentor Commented:
Hi designaire,
Please check this http://getyourwebsitehere.com/jswb/modwin/modalwinparent.html#pop , it's got plenty of techniques and you can try to get one that works for you, but please bear in mind that recent browsers are getting better and trying to fight such attitude, so not all scripts would function properly nowadays.

One example that worked for me, when you open the above link click the"  try the onBlur Focuser" it should do what you need, but please note that this method requires you to have control on the page being loaded into the frame in order to add the <body onblur = "window.focus( )">

So in your above example, add on onblur = "window.focus( )" to the body tag of  document_01.htm

Finally user can still persist and manage to escape it but it'll definitely be inconvenient and would be just easier to close

 

0
 
kadabaCommented:
focus works fine for me.

If you are looking for modal kinds, consdier remorina suggestions.
I would prefer jquery modal window.

however focus still works fine for me in all browsers I have, IE >6, FF >2.. also chrome.
0
 
designaireAuthor Commented:
I really like how the css pop-up works. I'm going use that at some point, if not now, later...thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.