javascript - 显示 :none not working in popup

Question

我正在尝试显示 this在 JSGCL 上弹出网站。它确实会显示弹出窗口，但既不显示弹出窗口的文本，也不会在按下关闭时关闭弹出窗口。

HTML:

<div id="popup">
    <div >
        <h1>JamaPunji</h1>
        <p><a href="http://www.jamapunji.pk/" 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");
  }); 

Answer 1

您的 DOM 已损坏。

原始代码缺少一个 </div>结束标签。

<div id="popup">
    <div >
        <h1>JamaPunji</h1>
        <p><a href="http://www.jamapunji.pk/" target="_blank">Click here</a> to get details.</p>
       <a href="#" id="close_popup">Close</a>
    </div>
</div>

而且在 JSGCL 上似乎 $ 没有映射到 jQuery，所以你也应该改变你的 js:

jQuery(document).ready(function() {
    jQuery("#popup").css("display", "block");
    jQuery("#close_popup").click(function(){
        jQuery("#popup").css("display", "none");
    }); 
});