jQuery popup box not closing

Question

The jQuery popup box is not closing. It opens correctly but will not close when I click on either close or "x".

If I remove the # from href="#" then the box will close but loads the url of the page. I want the box to close without loading a url.

What have I got wrong?

 jQuery(function() { //----- OPEN jQuery('[data-popup-open]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-open'); jQuery('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); e.preventDefault(); }); //----- CLOSE jQuery('[data-popup-close]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-close'); jquery('[data-popup="' + targeted_popup_class + '"]').fadeOut(3); e.preventDefault(); }); }); 

 /* Outer */ .popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); } /* Inner */ .popup-inner { max-width:700px; width:90%; padding:40px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; } /* Close Button */ .popup-close { width:30px; height:30px; padding-top:4px; display:inline-block; position:absolute; top:0px; right:0px; transition:ease 0.25s all; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); border-radius:1000px; background:rgba(0,0,0,0.8); font-family:Arial, Sans-Serif; font-size:20px; text-align:center; line-height:100%; color:#fff; } .popup-close:hover { -webkit-transform:translate(50%, -50%) rotate(180deg); transform:translate(50%, -50%) rotate(180deg); background:rgba(0,0,0,1); text-decoration:none; } 

 <a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a> <div class="popup" data-popup="popup-1"> <div class="popup-inner"> <h2>Have some feedback?</h2> <p>Use the feedback box below if you have a question, comment or general feedback.</p> <p><a data-popup-close="popup-1" href="#">Close</a></p> <a class="popup-close" data-popup-close="popup-1" href="#">x</a> </div> </div> 

Answer 1

You've a typo..

This --> jquery('[data-popup="' + targeted_popup_class + '"]').fadeOut(3);

It should be jQuery instead of jquery . Don't hesitate to look at the console logs if something doesn't work as expected.

 jQuery(function() { //----- OPEN jQuery('[data-popup-open]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-open'); jQuery('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); e.preventDefault(); }); //----- CLOSE jQuery('[data-popup-close]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-close'); jQuery('[data-popup="' + targeted_popup_class + '"]').fadeOut(3); e.preventDefault(); }); }); 

 /* Outer */ .popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); } /* Inner */ .popup-inner { max-width:700px; width:90%; padding:40px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; } /* Close Button */ .popup-close { width:30px; height:30px; padding-top:4px; display:inline-block; position:absolute; top:0px; right:0px; transition:ease 0.25s all; -webkit-transform:translate(50%, -50%); transform:translate(50%, -50%); border-radius:1000px; background:rgba(0,0,0,0.8); font-family:Arial, Sans-Serif; font-size:20px; text-align:center; line-height:100%; color:#fff; } .popup-close:hover { -webkit-transform:translate(50%, -50%) rotate(180deg); transform:translate(50%, -50%) rotate(180deg); background:rgba(0,0,0,1); text-decoration:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a> <div class="popup" data-popup="popup-1"> <div class="popup-inner"> <h2>Have some feedback?</h2> <p>Use the feedback box below if you have a question, comment or general feedback.</p> <p><a data-popup-close="popup-1" href="#">Close</a></p> <a class="popup-close" data-popup-close="popup-1" href="#">x</a> </div> </div>