Popup Style Window Using Elements

A HunBug Document
Document No.: 11540
Last Updated: 01 Apr 2008
Author: HunBug

With more and more browsers and the vast array of toolbar plug-ins stopping popup windows, the flow of many genuine web sites can be disrupted. Using absolute positioned DIV elements we can create the appearance of a window, within the page, so that our site flow does not stutter with popup alerts.

Dialog Example

This simple example page contains a button, that when pressed displays a popup dialog window.
<html>
  <head>
 
    <style type="text/css">

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

      .popuptitle {
        background: blue;
        color: white;
        font-weight: bold;
        height: 15px;
        padding: 5px;
      }
      
      .popupbody {
        background: #ddd;
        padding: 5px;
        text-align: center;
      }

      #popup1 { top: 100px; left: 50px; }

    </style>

    <script type="text/javascript">

      function popupWindow(o,d)
      {
        // o - Object to display.
        // d - Display, true =  display, false = hide
      
        var obj = document.getElementById(o);
        if(d)
          obj.style.display = 'block';
        else
          obj.style.display = 'none';
      }

    </script>

  </head>
  <body>

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

    <input type="button" value="Show Popup 1" onClick="popupWindow('popup1',true);"/>

    <div id="popup1" class="popup">
      <div class="popuptitle">Popup 1</div>
      <div class="popupbody">
        <p>Press close to the Popup</p>
        <input type="button" value="Close" onClick="popupWindow('popup1',false);"/>
      </div>
    </div>

  </body>

</html>

How it Works

The popupDialog function has two parameters to display or hide a DIV element. Our example uses CSS and HTML to mimic a window appearance:
  • o: The id string of the object that is to be displayed.
  • d: Whether to display or hide the object. Boolean values of true for fade in for display, false for hide.
We are using a function here for clarity and to make it easier to maintain. There would be nothing to stop you directly using 
onClick="document.getElementById('popup1').style.display =  'block';"

Dialog Example Test

Dialog Popup

Press close to the Popup


Web Page Link Example

If you are wanting to display a web page in the popup, rather than just text, you can make adjustments, changing the inner DIV element to a IFRAME.
<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: 500px }
      #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"></iframe>
    </div>

  </body>

</html> 

How it Works

This example differs slightly from the dialog example. The close popup button has moved to the titlebar and the popupWindow function accepts a URL rather than true or false. If the URL is null or ommitted then the popup is hidden.

The function assumes the inner IFRAME name and the outer DIV id have the same value.

Web Page Example Test

Web Page Popup

Variations

The functions can easily be modified for numerous specific requirements, such as changing the title, positioning in the centre of the window, etc.
See the further reading links below for animating the fade in and out of the popup, making the popup modal by creating an opaque layer, or even creating all the code at runtime.

Further Reading

Animated Fading In and Out of Popup Elements: Simply popup elements that fade in and out.
Opaque the Background When Displaying a Popup Element: Emphasise the popup by adding an opaque layer to the main page
DOM InsetBefore and InsertAfter Functions: Build the popup html code automatically at runtime, for the ultimate dynamic popup

HunBug Store








Comments are all individually read, none are automatically posted to the site.