[英]Can't close fancybox after automatic open on page load
I have a problem with fancybox that opens automatically on page load. 我的fancybox出现问题,该问题会在页面加载时自动打开。 After I click the close button the fancybox opens again. 单击关闭按钮后,fancybox再次打开。
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: CSS:
.popup-wrapper {
display: none;
width: 50%;
height: auto;
img {
width: 80%;
height: auto;
}
}
the php & html 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. 当我按下ESC按钮或单击黑色背景时,该框将毫无问题地关闭。
I solved this by adding preventDefault
to my code and now it works. 我通过在代码中添加preventDefault
解决了这一问题,现在它可以工作了。 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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.