CODEWITHSUNDEEP
jqueryhtmlcss
user379888
user379888

Reputation:

Close button not working in popup

I have made a popup. It works fine on Fiddle but when I port it to the website, the close button does not work. Please guide me how can I make it work. Thanks.

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>

Upvotes: 0

Views: 4743

Answers (4)

ANR Upgraded Version
ANR Upgraded Version

Reputation: 949

This is the mistake what you are doing repeated id's.Id should be unique everytime.

enter image description here

Upvotes: 1

rrk
rrk

Reputation: 15846

Your website has two elements with the same id. This is not a good practice. IDs are supposed to be unique in an HTML page. So the best thing you can do is to use different IDs or use same class for selection. Using class will lead to closing all the popups if conditions are not provide for closing only the parent popup. There is another way, which is not advised.

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

or using parent

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

Upvotes: 2

Starfish
Starfish

Reputation: 3574

In your websitescript jQuery.noConflict() is called on the jQuery file to use a slider. This means $ doesn't work, but jQuery does. Also change your IDs to classes. You can't have duplicate IDs on your page, it will cause errors. Your code would look like this:

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>

Upvotes: 1

crackjoe
crackjoe

Reputation: 54

You have 2 same id #popup in your page.. This may cause a problem before hiding..

Upvotes: 3

Related Questions