Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 2, 2021 at 6:17 pm #1331347
    kylerollins

    Hi there,

    i used the Magnific Popup to make several modal pop ups, and looks good.

    I used this script on the theme functions.

    function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
		
	  	type:'inline',
	  	midClick: true
	});
});
</script>
<?php }
add_action("wp_head", "popup_inline");

    For the modal content i used the color section with the id assessment and classes mfp-hide mfppopup

    And for the link to trigger the modal the following
    <a href="#assessment" class="open-popup-link" onclick="popup_inline();"><img class="wp-image-4218 size-full aligncenter" src="/wp-content/uploads/2021/11/thumb-Assessment.webp" alt="" width="661" height="341" /></a>

    The main issue is that on the background the page scrolls up. Although on Chrome (desktop) we have no issue when we close the modal popup ( because the page is on the section that we clicked on) on safari the page in on the beginning.

    And on mobile (both on safari and chrome) when we click the page also goes up.

    Can you help figure the solution, i tried a bunch of options without success.

    Thank you very much.

    Cheers

    December 3, 2021 at 3:34 am #1331371
    Mike

    Hey Kyle,
    Thanks for the link to your site but the login didn’t work for me, nonetheless try this function in your functions.php instead:

    function popup_inline_with_no_scroll() { ?>
<script>
(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_head", "popup_inline_with_no_scroll");

    Then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    December 6, 2021 at 1:57 pm #1331708
    kylerollins

    Hi Mike,

    Thank you for your quick reply.

    I used the code you sent and worked like a charm.

    Thank you very much.

    Cheers

    December 6, 2021 at 3:48 pm #1331722
    Nikko

    Hi kylerollins,

    We’re glad that Mike could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Using Magnific Popup modal make page scrolls up’ is closed to new replies.