display:none not working in popup

I am trying to display this popup on JSGCL website. It does display the popup but it neither displays the text of the popup nor close the popup on pressing close.

HTML:

<div id="popup">
    <div >
        <h1>JamaPunji</h1>
        <p><a href="http://ift.tt/1h8fFKW" target="_blank">Click here</a> to get details.</p>
       <a href="#" id="close_popup">Close</a>
</div>

CSS:

#popup{
    position: absolute;
    background: #004990;
    top: 45%;
    left: 45%;
    width: 300px;
    height: 200px;
    /* border: 1px solid #000; */
    border-radius: 5px;
    padding: 5px;
    color: #fff;
    z-index:9999;
} 
#close_popup {
    color:#FFF;
    position:absolute;
    right:0px;
    top:0px;
}
#popup h1,#popup p, #popup a{
    text-align:center;
    z-index:9999;
}
#popup a{
    color:#F47B20;
      z-index:9999;
}

JavaScript:

$(document).ready(function() 
 {    $("#popup").css("display", "block");
  });

  $("#close_popup").click(function(){
    $("#popup").css("display", "none");
  }); 

via Chebli Mohamed