Popup voor je website

De popup wordt tegenwoordig niet meer als wenselijk gezien terwijl de vraag is of dit altijd terecht is. Een popup kan handig zijn om te gebruiken als je bijvoorbeeld bezoekers een extra berichtje wilt laten zien op bijvoorbeeld de manier van Hyves, of als je een popup wilt hebben voor inloggen. Aangezien bijna elke browser een popupkiller heeft moeten we die popupblokkeerders omzeilen. Dit artikel geeft een voorbeeld van een eenvoudig popupschermpje waarmee je zou kunnen inloggen.

Het schermpje kan op iedere willekeurige plek verschijnen. Het werkt in vrijwel iedere browser en een popupblokkeerder heeft er geen invloed op.

Drie bestanden; html, css en javascript

De code die we gaan gebruiken bestaat uit drie delen, een javascript bestand, een html bestand en een css bestand. Naast de code zijn er ook een drietal plaatjes, deze zorgen ervoor dat het schermpje er zo uitziet, zoals we dat zelf willen. Er wordt dus geen standaard browserscherm gebruikt. De code is overigens gemaakt door Ilya S. Lyubinskiy.
Ten eerste de code voor het javascript bestand.

// GEBRUIK
//
// function popup_show(id, drag_id, exit_id, position, x, y, position_id)
//
// id           - id van een popup scherm;
// drag_id    - id van een element in het popup scherm bedoeld om te verplaatsen
// exit_id     - id van een element in een popup scherm bedoeld om te verbergen
// position    - positionie type:
//                "element", "element-right", "element-bottom", "mouse",
//                "screen-top-left", "screen-center", "screen-bottom-right"
// x, y          - offset
// position_id - id van een element ten opzichte waarvan het popup scherm relatief wordt geplaatst.

// ***** Variabelen *************************************************************
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;

// ***** popup_mousedown *******************************************************
function popup_mousedown(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";
  popup_mouseposX = ie ? window.event.clientX : e.clientX;
  popup_mouseposY = ie ? window.event.clientY : e.clientY;
}

// ***** popup_mousedown_window ************************************************
function popup_mousedown_window(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";
  if ( ie && window.event.button != 1) return;
  if (!ie && e.button            != 0) return;
  popup_dragging = true;
  popup_target   = this['target'];
  popup_mouseX   = ie ? window.event.clientX : e.clientX;
  popup_mouseY   = ie ? window.event.clientY : e.clientY;
  if (ie)
       popup_oldfunction = document.onselectstart;
  else popup_oldfunction = document.onmousedown;
  if (ie)
       document.onselectstart = new Function("return false;");
  else document.onmousedown   = new Function("return false;");
}

// ***** popup_mousemove *******************************************************
function popup_mousemove(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);
  var mouseX  = ie ? window.event.clientX : e.clientX;
  var mouseY  = ie ? window.event.clientY : e.clientY;
  if (!popup_dragging) return;
  element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
  element.style.top  = (element.offsetTop +mouseY-popup_mouseY)+'px';
  popup_mouseX = ie ? window.event.clientX : e.clientX;
  popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ***** popup_mouseup *********************************************************
function popup_mouseup(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);
  if (!popup_dragging) return;
  popup_dragging = false;
  if (ie)
       document.onselectstart = popup_oldfunction;
  else document.onmousedown   = popup_oldfunction;
}
// ***** popup_exit ************************************************************
function popup_exit(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);
  popup_mouseup(e);
  element.style.display = 'none';
}

// ***** popup_show ************************************************************
function popup_show(id, drag_id, exit_id, position, x, y, position_id)
{
  var element      = document.getElementById(id);
  var drag_element = document.getElementById(drag_id);
  var exit_element = document.getElementById(exit_id);
  var width        = window.innerWidth  ? window.innerWidth  : document.documentElement.clientWidth;
  var height       = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
  element.style.position = "absolute";
  element.style.display  = "block";
  if (position == "element" || position == "element-right" || position == "element-bottom")
  {
    var position_element = document.getElementById(position_id);
    for (var p = position_element; p; p = p.offsetParent)
      if (p.style.position != 'absolute')
      {
        x += p.offsetLeft;
        y += p.offsetTop;
      }
    if (position == "element-right" ) x += position_element.clientWidth;
    if (position == "element-bottom") y += position_element.clientHeight;
    element.style.left = x+'px';
    element.style.top  = y+'px';
  }
  if (position == "mouse")
  {
    element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +popup_mouseposY+y)+'px';
  }
  if (position == "screen-top-left")
  {
    element.style.left = (document.documentElement.scrollLeft+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +y)+'px';
  }
  if (position == "screen-center")
  {
    element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )/2+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +(height-element.clientHeight)/2+y)+'px';
  }
  if (position == "screen-bottom-right")
  {
    element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )  +x)+'px';
    element.style.top  = (document.documentElement.scrollTop +(height-element.clientHeight)  +y)+'px';
  }
  drag_element['target']   = id;
  drag_element.onmousedown = popup_mousedown_window;
  exit_element.onclick     = popup_exit;
}

// ***** Attach Events *********************************************************
if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousedown', popup_mousedown);
else document.addEventListener('mousedown', popup_mousedown, false);
if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);

Noem bovenstaand bestand popup-window.js en sla het op.
Het volgende bestand is de html code. Dit is de hele pagina. Meestal zul je de code in een bestaande code verwerken. Let er dan op dat je in ieder geval de code voor het formulier, de code voor het popup scherm en de verwijzingen naar het javascript en het css bestand in een bestaande pagina opneemt. Hier de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DHTML Popup Window</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords"    content="" />
<link rel="stylesheet" type="text/css" href="popup.css" />
<script type="text/javascript" src="popup-window.js"></script>
</head>
<body>
<h3>DHTML Popup Window</h3>

<!-- ***** Form ************************************************************ -->
<form action="" onsubmit="return false;">
<div>
<input type="button" value="Linksboven"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-top-left',      20,  20);" />
<input type="button" value="Midden"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-center',         0,   0);" />
<input type="button" value="Rechtsonder"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'screen-bottom-right', -20, -20);" />
<input type="button" value="Muis"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse',               -10, -10);" />
<input type="button" value="Onder" id="pos_bottom"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-bottom', 0, 10, 'pos_bottom');" />
<input type="button" value="Rechts"  id="pos_right"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit', 'element-right',  10, 0, 'pos_right' );" />
<input type="button" value="Standaard"
       onclick="popup_show('popup', 'popup_drag', 'popup_exit');" />
</div>
</form>

<!-- ***** Popup Window **************************************************** -->
<div class="sample_popup"     id="popup" style="display: none;">
<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit"   id="popup_exit" src="form_exit.png" alt="" />
   Login
</div>
<div class="menu_form_body">
<form action="sample.php">
<table>
  <tr><th>Gebruikersnaam:</th><td><input class="field" type="text"     onfocus="select();" name="username" /></td></tr>
  <tr><th>Wachtwoord:</th><td><input class="field" type="password" onfocus="select();" name="password" /></td></tr>
  <tr><th>         </th><td><input class="btn"   type="submit"   value="Aanmelden" /></td></tr>
</table>
</form>
</div>
</div>
</body>
</html>

Als laatste het stijlblad. Voor dit stijlblad, dat we de naam ‘popup.css’ geven gebruiken we de volgende code:

div.sample_popup { z-index: 1; }
div.sample_popup div.menu_form_header
{
  border: 1px solid black;
  border-bottom: none;
  width: 200px;
  height: 20px;
  line-height: 19px;
  vertical-align: middle;
  background: url('form_header.png') no-repeat;
  text-decoration: none;
  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size: 13px;
  color:  #206040;
  cursor: default;
}
div.sample_popup div.menu_form_body
{
  width: 200px;
  border: 1px solid black;
  background: url('form.png') no-repeat left bottom;
}
div.sample_popup img.menu_form_exit
{
  float:  right;
  margin: 4px 5px 0px 0px;
  cursor: pointer;
}
div.sample_popup table
{
  width: 100%;
  border-collapse: collapse;
}
div.sample_popup th
{
  width: 1%;
  padding: 0px 5px 1px 0px;
  text-align: left;
  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #004060;
}
div.sample_popup td
{
  width: 99%;
  padding: 0px 0px 1px 0px;
}
div.sample_popup form
{
  margin:  0px;
  padding: 8px 10px 10px 10px;
}
div.sample_popup input.field
{
  width: 95%;
  border: 1px solid #808080;
  font-family: Verdana, Sans-Serif;
  font-size: 12px;
}
div.sample_popup input.btn
{
  margin-top: 2px;
  border: 1px solid #808080;
  background-color: #DDFFDD;
  font-family: Verdana, Sans-Serif;
  font-size: 11px;
}

In de code kom je twee plaatjes tegen, te weten; ‘form_header.png’ en ‘form.png’. In de html-code stond nog het plaatje ‘form_exit.png’. Deze plaatjes staan hierna. De plaatjes kun je downloaden en op de eigen server opslaan. Wanneer je dit allemaal gedaan hebt dan kun je het html-document openen en kun je het popup scherm uitproberen. Wil je het allemaal eerst zien en dan pas maken dan kun je hier kijken.
De plaatjes nog:



Succes!