$(function() {
  $('#popup').before($('<div id="shaded_ground" style="display:none"></div>'))
  $("#shaded_ground").css({
    "opacity": "0.7",
    "height": document.documentElement.clientHeight
  });
  $(".popup").click(function() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var popupHeight = $("#popup").height();
    var popupWidth = $("#popup").width();
    $("#popup").css({
      "position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
    });
    $("#shaded_ground").fadeIn(500);
    $("#popup").fadeIn(500);
    return false;
  });
  $(".close_popup").click(function() {
    $("#shaded_ground").fadeOut(500);
    $("#popup").fadeOut(500); 
    return false;
  });
  $("#shaded_ground").click(function() {
    $("#shaded_ground").fadeOut(500);
    $("#popup").fadeOut(500); 
  });
  $(document).keypress(function(e){  
    if(e.keyCode==27){  
      $("#shaded_ground").fadeOut(500);
      $("#popup").fadeOut(500); 
    }
  });
})