显示:无在弹出窗口中不起作用 [英] display:none not working in popup

问题描述

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

HTML:

<div ><h1>JamaPunji</h1><p><a href="http://www.jamapunji.pk/" target="_blank">点击这里</a>以获取详细信息.
<a href="#" id="close_popup">关闭</a>

CSS:

#popup{位置:绝对；背景:#004990；顶部:45%；左:45%；宽度:300px；高度:200px；/* 边框:1px 实心 #000;*/边框半径:5px；填充:5px；颜色:#fff;z-索引:9999；}#close_popup {颜色:#FFF；位置:绝对；右:0px;顶部:0px;}#popup h1,#popup p, #popup a{文字对齐:居中；z-索引:9999；}#弹出一个{颜色:#F47B20；z-索引:9999；}

JavaScript:

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

解决方案

您的 DOM 已损坏.

原始代码缺少 </div> 结束标记.

<div ><h1>JamaPunji</h1><p><a href="http://www.jamapunji.pk/" target="_blank">点击这里</a>以获取详细信息.
<a href="#" id="close_popup">关闭</a>

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

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

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://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");
  }); 

解决方案

Your DOM is broken.

The original code is missing a </div> closing tag.

<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>

And it also seems on the JSGCL the $ is not mapped to jQuery, so you should also change your js:

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

这篇关于显示:无在弹出窗口中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！