I needed to develop a rollover popup div for one of my projects. When you roll over a gig item on the home page, the full details of the gig pops up which is placed according to the mouse position. I did this for 2 reasons:

• To make the site more interactive/web 2.0
• To decrease the amount of clicks for a user to view the data.

 
In this tutorial you will be showing the following:

• How to get the mouse position
• How to display a popup
• How to disable/block/hide the background by using a transparent div
  

 
You can view the online demo/example here : Popup Demo 

You can download the files here : Popup Files

Code: 

JavaScript 

// To get the mouse position:

// Checks if the browsers is IE or another.

// document.all will return true or false depending if its IE

// If its not IE then it adds the mouse event

if (!document.all)

document.captureEvents(Event.MOUSEMOVE)

// On the move of the mouse, it will call the function getPosition

document.onmousemove = getPosition; 

// These varibles will be used to store the position of the mouse

var X = 0

var Y = 0 

// This is the function that will set the position in the above varibles

function getPosition(args)

{

  // Gets IE browser position

  if (document.all)

  {

    X = event.clientX + document.body.scrollLeft

    Y = event.clientY + document.body.scrollTop

  }

  // Gets position for other browsers

  else

  { 

    X = args.pageX

    Y = args.pageY

  } 

}

 // To enable/disable the background: 

function backgroundFilter()

{

    var div;

    if(document.getElementById)

    // Standard way to get element

    div = document.getElementById('backgroundFilter');

    else if(document.all)

    // Get the element in old IE's

    div = document.all['backgroundFilter'];   

    // if the style.display value is blank we try to check it out here

    if(div.style.display== '' && div.offsetWidth != undefined&&div.offsetHeight != undefined)

    {

        div.style.display = (div.offsetWidth!=0 && div.offsetHeight!=0)?'block':'none';

    }

    // If the background is hidden ('none') then it will display it ('block').

    // If the background is displayed ('block') then it will hide it ('none').

    div.style.display = (div.style.display==''||div.style.display=='block')?'none':'block';

}

 // To display/hide the popup: 

function popUp()

{

    var div;

    if(document.getElementById)

    // Standard way to get element

    div = document.getElementById('popupWindow');

    else if(document.all)

    // Get the element in old IE's

    div = document.all['popupWindow'];   

    // if the style.display value is blank we try to check it out here

    if(div.style.display== '' && div.offsetWidth != undefined && div.offsetHeight != undefined)

    {

        div.style.display = (div.offsetWidth!=0 && elem.offsetHeight!=0)?'block':'none';

    }

    // If the PopUp is hidden ('none') then it will display it ('block').

    // If the PopUp is displayed ('block') then it will hide it ('none').

    div.style.display = (div.style.display==''||div.style.display=='block')?'none':'block';

    // Off-sets the X position by 15px

    X = X + 15;   

    // Sets the position of the DIV

    div.style.left = X+'px';

    div.style.top = Y+'px';

}

CSS

The main thing to note about the CSS is z-index, display, filter & position

• Z-Index : This is the way you can layer div's on top of each other. In my example i set the z-index of the div that will disable the background to 1000. And because i wanted the popup to be in front of that div, i set the z-index of the popup to 1005.
• Display:  When i want a div to be displayed, is set it to "Block" and i set the display to "None" to hide it. You can see in the javascript code above where this is been done.
• Filter: I used filter + opacity to make the disabled div transparent so the user can still view the background.
• Position: This is got from the javascript function and it then sets the position of the popup div 

To understand these terms much better and to improve on your css/javascript and many more skills then please visit: www.w3schools.com for lots of great tutorials.

To view the css code: Click Here