Can't close fancybox after automatic open on page load

I have a problem with fancybox that opens automatically on page load. After I click the close button the fancybox opens again.

Could you help me out please?


jQuery(function($){
$(".popup-wrapper").fancybox({
'padding': '0',
'max-width': '50%',
'max-height': '50%',
'autoSize': false,
'transitionIn': 'fade',
'transitionOut': 'fade',
});

$(".popup-wrapper").trigger('click');
});



css:

.popup-wrapper {
display: none;
width: 50%;
height: auto;
img {
width: 80%;
height: auto;
}
}


the php & html

<?php $args = array('post_type' => 'popup', 'showposts' => 5,);
$the_query = new WP_Query( $args ); ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$meta = get_post_meta( $post->ID, 'popup_details', true ); ?>

<?php if (is_array($meta) && $meta['displayPopup'] === '1') { ?>






<!-- .popup-wrapper -->
<?php };
endwhile;

wp_reset_postdata(); ?>


UPDATE
The problem appears only when I click on the close button. When I hit the ESC button or click on the black background then the box closes with no problem.

Could you post some html/css? Just a hunch but it sounds like the code is firing twice. Might be something to do with .trigger(). If you comment that line out does it work?
– Derek Nolan
Jun 28 at 16:35

ok, I have updated my question
– Dariusz
Jun 28 at 17:42

1 Answer
1

I solved this by adding preventDefault to my code and now it works. Hope this help somebody in the future.

preventDefault

jQuery(function($){
$(".popup-wrapper").fancybox({
'padding': '0',
'autoSize': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
});

$(".popup-wrapper").trigger('click');

$(document).find('.fancybox-close-small').on('click', function(e) {
e.preventDefault();
self.close(e);
});
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.