关闭按钮不在弹出窗口中工作

Question

我做了一个弹出窗口。它在Fiddle上工作正常，但当我将其移植到website时，关闭按钮不起作用。请指导我如何使其工作。感谢。

HTML：

<div id="popup">
        <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;
}

jQuery的：

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

Answer 1

你的页面中有2个相同的id #popup ..这可能会在隐藏之前导致问题..

Answer 2

您的网站有两个ID相同的元素。这不是一个好习惯。 ID应该在HTML页面中是唯一的。因此，您可以做的最好的事情是使用不同的ID或使用相同的类进行选择。如果不提供仅关闭父弹出窗口的条件，则使用class将导致关闭所有弹出窗口。还有另一种方法，不建议。

jQuery(document).ready(function() {
    jQuery("#popup").css("display", "block");
    jQuery("#close_popup").click(function(){
        jQuery("[id='popup']").hide(); 
    }); 
});

或使用父

jQuery("#close_popup").click(function(){
    jQuery(this).parents('#popup').hide(); 
}); 

Answer 3

在您的网站上，在jQuery文件上调用jQuery.noConflict()以使用滑块。这意味着$无效，但jQuery可以。还要将ID更改为类。您的网页上不能包含重复的ID，这会导致错误。你的代码看起来像这样：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
  <h1>JamaPunji</h1>
  <p><a href="http://www.jamapunji.pk/" target="_blank">Click here</a> to get details.</p>
  <a href="#" class="close_popup">Close</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是你在重复身份的错误。每次都应该是唯一的。