jQuery popup close button dont work

Question

I have a problem with the jQuery dialog popup. Here's the code:

<a href="#popup_open" class="btn sign-up popup wow fadeInLeft" data-wow-delay="0.4s">CLICK TO OPEN</a>
<div id="popup_open" style="display:none">
    <div class="dialog">
        POPUP CONTENT
        <div class="popup_close">×</div>
    </div>
</div>

and the js:

$('a.popup').popup();

I wrote a simple closing script, but it only works one time.

$(document).ready(function () {
    $('.popup_close').click(function () {
        $('.popup_back').css('opacity', '0');
        $('.popup_cont').css('opacity', '0');
    });
});

How do I make the popup close every time?

Answer 1

One solution (though maybe not the best) is to add that click event on the close button in the function that opens the popup. If you go into developer tools and manually add the click event to the close button after the modal is open, it works every time.

Something like this could work:

$(".popup").click(function() { // Put the correct selector here, this is just a guess

    // Opens the popup
    $('a.popup').popup();

    // Binds the click function
    $('.popup_close').click(function () {
        $('.popup_back').css('opacity', '0');
        $('.popup_cont').css('opacity', '0');
    });
});

There may be a cleaner solution but this is quick and dirty.