// define 2 divs on the page: 
// <div id="popupAlert">
//   <a id="popupAlertClose">[close]</a>
//   <h1 id="alertTitle"></h1>
//   <p id="alertArea"></p></div>
// <div id="backgroundPopup"></div>

var popupStatus = 0; 
$(document).ready(function(){
  $("#popupAlertClose").click(function(){  disablePopup();  });  
  $("#backgroundPopup").click(function(){  disablePopup();  });  
});

function loadPopup(msg,title){   // title is optional
  if(popupStatus==1) return;  
  centerPopup();
  if (typeof(title)=="undefined") title="Alert";
  $("#alertTitle").html(title);
  $("#alertArea").html(msg);
  $("#backgroundPopup").css({ "opacity": "0.7" });  
  $("#backgroundPopup").fadeIn("slow");  
  $("#popupAlert").fadeIn("slow");  
  $("#popupAlert").keypress(function(e){  
    if((e.keyCode==27 || e.keyCode==13)){  disablePopup();  }
  });
  popupStatus = 1;  
}  

function disablePopup(){  
  if(popupStatus==0) return;  
  $("#backgroundPopup").fadeOut("slow");  
  $("#popupAlert").fadeOut("slow");  
  popupStatus = 0;  
}  

function centerPopup(){  
  var windowWidth = document.documentElement.clientWidth;  
  var windowHeight = document.documentElement.clientHeight;  
  var popupHeight = $("#popupAlert").height();  
  var popupWidth = $("#popupAlert").width();  
  $("#popupAlert").css({  
    "position": "absolute",  
    "top": windowHeight/2-popupHeight/2,  
    "left": windowWidth/2-popupWidth/2  
  });  
  $("#backgroundPopup").css({ "height": windowHeight });  
}