CODEWITHSUNDEEP
jquerycsspopupclickpopupwindow
Menno van Ginkel
Menno van Ginkel

Reputation: 86

Custom Pop-up box doesnt close

I have made a custom popup box on this website http://dutchinnovators.nl/dev/

By clicking on a hexagon, a hidden div structure is copied and prepended to #page and then faded in. This all works fine. However, the .bedrijf-popup doesn't want to close

It seems the Click action is not recognized or something, I've been trying to fix it for some time and searched the forums, but no luck.

Any help to close this popup would be appreciated!

HTML

<div class="bedrijf-popup">
    <div class="popup_black-bg"></div>
        <div class="popup_container">
            <div class="popup-close"></div>
            <content divs>                  
        </div>
    </div>
</div>

jQuery

  jQuery('.popup-close').each(function() {
    jQuery(this).bind('click', function(){    
      jQuery('#page > .bedrijf-popup .popup_black-bg').animate({'opacity': 0}, 500);
      jQuery('#page > .bedrijf-popup .popup_container').delay(500).animate({'opacity': 0}, 500);
      jQuery('#page > .bedrijf-popup').remove();
    });
 });

Upvotes: 0

Views: 65

Answers (2)

connexo
connexo

Reputation: 56753

The problem is that at the moment you're trying to bind the click handler, there is no .popup-close in the DOM since the whole element that contains it is being created only after clicking a hexagon. Bind though does not listen for later changes in the DOM.

So what you have to do is move the binding of your closing click handler from jQuery(document).ready() to the method that creates your <div class="bedrijf-popup">, after it has been added to the DOM.

That is also the reason why your click handler works if you call it in the console - obviously you're doing this in a setting where your popup is already there.

From the jQuery documentation:

Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

Upvotes: 1

Ardian
Ardian

Reputation: 408

Try this alternative instead

 jQuery(document).bind("click", ".popup-close", function() {  
      jQuery('#page > .bedrijf-popup .popup_black-bg').animate({'opacity': 0}, 500);
      jQuery('#page > .bedrijf-popup .popup_container').delay(500).animate({'opacity': 0}, 500);
      jQuery('#page > .bedrijf-popup').remove();
 });

Or

 jQuery(document).bind("click", ".popup-close", function() {  
      jQuery(this).parents('.bedrijf-popup').find('.popup_black-bg').animate({'opacity': 0}, 500);
      jQuery(this).parents('.bedrijf-popup').find('.popup_container').delay(500).animate({'opacity': 0}, 500);
      jQuery(this).parents('.bedrijf-popup').remove();
 });

And since you're using jQuery 1.7.1, you can use 'on' instead of 'bind'

Upvotes: 0

Related Questions