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?
<script>
jQuery(function($){
$(".popup-wrapper").fancybox({
'padding': '0',
'max-width': '50%',
'max-height': '50%',
'autoSize': false,
'transitionIn': 'fade',
'transitionOut': 'fade',
});
$(".popup-wrapper").trigger('click');
});
</script>
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') { ?>
<div class="popup-wrapper col-12 col-xl-12">
<?php the_post_thumbnail(); ?>
</div><!-- .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.
I solved this by adding preventDefault
to my code and now it works. Hope this help somebody in the future.
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);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.