關閉按鈕在彈出窗口中不起作用

Question

我彈出了。 它在Fiddle上工作正常，但是當我將其移植到網站上時 ，關閉按鈕不起作用。 請指導我如何使其工作。 謝謝。

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或使用相同的類進行選擇。 如果沒有提供僅關閉父級彈出窗口的條件，則使用類將導致關閉所有彈出窗口。 還有另一種方法， 不建議這樣做 。

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.noConflict() ，在jQuery文件上調用jQuery.noConflict()以使用滑塊。 這意味着$不起作用，但是jQuery起作用。 還將您的ID更改為類。 您的頁面上不能有重復的ID，這會導致錯誤。 您的代碼如下所示：

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

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

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

Answer 4

這是你在做重復的id的錯誤。id每次都應該是唯一的。