/**

  Basic div pop-up functionality with extra feature - fade background :)
  Be aware, it does work in Firefox (Gecko browsers), Opera, Safari and it does work
  in IE in standard compilant mode - it won't work in quirk mode on IE 4/5/6 :)

  How to use it? You need two layers - one for a popup, another to cover a webpage, here
  you have example css:

  #FadeBackground {
    display: none;
    background: black;
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    z-index: 100;
    -moz-opacity: 0.50;
    opacity: 0.50;
    height: 1px;
    filter: alpha(opacity=50);
  }

  #PopUpLayer {
    width: 600px;
    height: 400px;
    border: 2px solid #888;
    padding: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -320px;
    z-index: 200;
    color: black;
    background: white;
  }

  how to open popup?

  <a href="javascript:;" onclick="showDivPopup('PopUpLayer', 'FadeBackground');">open popup</a>

  how to close it? (place inside PopUpLayer div ;)

  <a href="javascript:;" onclick="hideDivPopup('PopUpLayer', 'Fadebackground');">close</a>

**/

function showDivPopup(divPopup, divDimmer) {

   var myWidth = 0, myHeight = 0, myBrowser = "";
   if( typeof( window.innerWidth ) == 'number' ) {
   //Non-IE
   //   document.getElementById(divPopup).style.position = 'fixed';
      document.getElementById(divDimmer).style.height = document.body.parentNode.scrollHeight + 'px';
      document.getElementById(divDimmer).style.width  = document.body.parentNode.scrollWidth  + 'px';
   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
      //IE 6+ in 'standards compliant mode'
//      document.getElementById(divDimmer).style.height = document.body.parentNode.scrollHeight + 'px';
//      document.getElementById(divDimmer).style.width  = document.body.parentNode.scrollWidth  + 'px';
    myHeight = Math.max(document.body.parentNode.scrollHeight, document.documentElement.clientHeight);
    myWidth  = Math.max(document.body.parentNode.scrollWidth, document.documentElement.clientWidth);

    document.getElementById(divDimmer).style.height = myHeight + 'px';
    document.getElementById(divDimmer).style.width  = myWidth  + 'px';
   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      //IE 4 compatible
      document.getElementById(divDimmer).style.height = (document.body.parentNode.scrollHeight-20) + 'px';
      document.getElementById(divDimmer).style.width  = (document.body.parentNode.scrollWidth-20)  + 'px';
   }

   var Selects = document.getElementsByTagName('select');
   for(i=0; i<Selects.length; i++) {
       Selects[i].style.visibility = 'hidden';
   }

   document.getElementById(divDimmer).style.display = 'block';
   document.getElementById(divPopup).style.display = 'block';

}

function hideDivPopup(divPopup, divDimmer) {
   document.getElementById(divDimmer).style.display = 'none';
   document.getElementById(divDimmer).style.height = '1px';
   document.getElementById(divPopup).style.display = 'none';
   var Selects = document.getElementsByTagName('select');
   for(i=0; i<Selects.length; i++) {
       Selects[i].style.visibility = 'visible';
   }
}