Paul Paul - 1 month ago 8
Javascript Question

Issue getting data popup to close with click function

I have used the following method to make pop-ups open and close before, but in this case I cannot get the pop up to close. Does anyone see anything standing out within my close code which would not allow the pop up to close?

<div id="new-profile-pic-preview">
<form>
<img class="none pic-preview" id="file" src="#" alt="your image">
<input type="submit" class="none" name="create" value="Upload Profile Picture">
</form>
<a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
</div>


JS

$("#upload-link").on('click', function(e){
e.preventDefault();
$("#upload-profile-pic:hidden").trigger('click');
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
$('body').css('overflow', 'auto');
e.preventDefault();
});

Answer

From what I can see in your code and our brief chat in the comments, all you need to do is to choose the correct element to fadeOut

So the code which is responsible for closing the pupop would be like this:

//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
    $('[#new-profile-pic-preview').fadeOut(350);
    $('body').css('overflow', 'auto');
    e.preventDefault();
});