Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 25, 2021 at 6:00 pm #1326366
    domchocolate

    Hi I have a site for a client and it uses the Avia pop-up for a contact form.

    Please visit https://www.ollemans.com/portfolio-item/an-amethyst-cut-glass-huqqa/ for the example.

    On click on the “Express an interest” button I am using the following script to activate the pop-up modal.

    function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
	});
});
</script>
<?php }

add_action('wp_head', 'popup_inline');

    This works fine on desktop where it appears in the middle of the screen above the fold. Unfortunately, on mobile, it appears below the fold on the screen. This is confusing for users.

    Any ideas on how I can get the modal to appear in the middle of the viewport on mobile devices?

    Thanks in advance.

    Dominic

    October 26, 2021 at 8:58 am #1326451
    Ismael

    Hey domchocolate,

    Thank you for the inquiry.

    We have checked the lightbox on a browser device emulation and it seems to be working correctly. If you need to prevent the document from scrolling and make sure that the container appears at the center of the document, please try to replace the script with the following code. 

    function av_open_inline_popup(){
?>
<script type="text/javascript">
(function($) {
$(window).on('load', function(){
	$('.open-popup-link').addClass('no-scroll');
	$('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				$('body').css("overflow-y", "hidden");
			},
			close: function() {
				$('body').css("overflow-y", "auto");
			},
		},
	});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'av_open_inline_popup');

    Thread: https://kriesi.at/support/topic/lightbox-17/

    Best regards,
    Ismael

    October 26, 2021 at 10:30 am #1326464
    domchocolate

    So brilliant. Thanks so much, Ismael!

    October 26, 2021 at 1:52 pm #1326493
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Avia pop-up / magnific pop-up on mobile pops up below the fold’ is closed to new replies.