Modal Pop Up Window on Mobiles

Hi
First of all I wanted to thank Yigit for having already answered me in another thread (https://kriesi.at/support/topic/popup-on-click/#post-1291561). He is always very kind and often finds solutions, like all the staff members. So thank you for the support you give to users. It is no coincidence that I have often advised my customers to buy Enfold.

Said that, today I am in trouble with customers who cannot update the website due to various issues that Enfold has had since WordPress 5.6 was released.

Let’s get to the point: as Yigit also saw, there is a problem with scrolling on mobile phones.
Yigit: “WordPress 5.7 was the final stage of jQuery version update in WP core and in Enfold 4.8 we have updated deprecated jQuery functions so I am guessing one of those updates caused the scroll issue.”

Dear Rikard I have prepared a subdomain for you (on my site I had to downgrade to be able to see the popup also on mobile phones): https://enfoldtest.fabiobaldanello.com/

Here you will find three buttons: FIRST TEST BUTTON, SECOND TEST BUTTON and THIRD TEST BUTTON.
FIRST TEST BUTTON is on top of the page so you won’t face any problem.
SECOND TEST BUTTON is Yigit solution with iframe. I tried it but is far away from what I need for many reasons that would be to long to explain.
THIRD TEST BUTTON is in the middle of the page (under SECOND TEST BUTTON before OUR STORY). Here you can see the weird behavior on mobiles. The page scrolls to the top and the Modal Popup is not visible anymore until you manually scroll down.

I hope that the Enfold team will be able to solve the problem and restore the functions of the modal popup as in previous versions in a short time. For the next releases it would be usefull to have the possibility to set a modal popup directly from ALB.

Best Regards
Manu

Hi Ismael

I tried your code but it’s not working.
I was using the following code with WordPress 5.5 and it was working fine:
function popup_inline() { ?>
<script type=”text/javascript”>
jQuery(window).load(function(){
jQuery(‘.open-popup-link-button a, .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’);

I tried adding the code you provided (removing the two slashes to enable the function) but it didn’t change anything. I tried removing the first code and use only the code you provided but the modal popup was not loaded at all. I tried adding the class to the function popup_inline (jQuery(‘.open-popup-link’).addClass(‘no-scroll’);) without any result.

I also tried adding some CSS like
.mfp-content {
position: fixed !important;
top:10px;
left:0px;}
but in this way the modal popup is fixed on the top and you can’t read all the content if it’s longer than the phone screen. Using only top doesn’t affect anything.

Help :)

Best Regards
Manu

Hi Ismael,
Thank you for the update, but it’s not working as expected.
Premise: no cache plugins, browser cache always empty, enfold minifications all disabled.
Added “a” to your code:
jQuery(‘open-popup-link-button a, .open-popup-link’).addClass(‘no-scroll’);
jQuery(‘open-popup-link-button a, .open-popup-link’).magnificPopup({

The strange thing is that the code works every now and then. Let’s say once every 15/20 attempts. In another installation I have it never works.
My code now is:

function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link-button a, .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');

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

If you want to take a look, in private content you will find the credentials to enter the website.

Best Regards
Manu

Hi

Great. Thank you so much. How could I miss the dot too?!?
I’ve used several themes over the years, but none have a support like Enfold. I hope this thread will be of help to everyone who uses the modal popup (e.g. ginnywills). Before asking for assistance, I always look for a solution in the Forum and I often find it. Thanks again.

Will the issue be fixed in the next release?

Best Regards
Manu

• This reply was modified 3 years, 7 months ago by manurimini.