Close popop/modal using back button without changing url

HI,

Thanks for the quick response.

I refer to the back button, standard on mobile devices, or the browser’s back buton on desktops.
Users usually close the modal using the physical back button of the cell phone and not the clicking on the screen.

For example:

<a href="https://vimeo.com/123456" rel="lightbox"><span style="font-size: 1.4em;">SHOW VIDEO</span></a>

Will open a Lightbox with a video. But the user, especially of cell phones, tends to close it by clicking on the cell’s return button, and consequently ends up leaving the page where it was.

I tried this little jQuery cheat, but it’s far from ideal.

<!-- Button back Close popup--> 
<script type="text/javascript"> jQuery(document).ready(function() {
	if(window.history&&window.history.pushState) {
		window.history.pushState(null, null, '');
		jQuery(window).on('popstate', function() {
			jQuery.magnificPopup.close()
		}
		)
	}
}
) 
</script>

Any suggestion?

Hi Ismael,

Thank you for your attention.

I tried the script informed, even with some variations of syntax, but no result.

The back button continues to result in returning to a previous page instead of just closing the modal.

Hi,

Yes, browser button back and in many mobiles a hard button calling the browser back button .

I tried the script below without success.

add_action('wp_footer', 'ava_custom_disable_back');
function ava_custom_disable_back(){
	?>
	<script type="text/javascript">
		(function($) {
            $(document).ready(function() {
                function zoomEnabled() {
                    var $zoom = $('body').is('.mfp-zoom-out-cur');
                    backDisable($zoom);
                }

                function backDisable($zoom) {
                    if($zoom) {
                        window.history.pushState(null, "", window.location.href);        
                        window.onpopstate = function() {
                            window.history.pushState(null, "", window.location.href);
                            $('.mfp-close').trigger('click');
                        };
                    }  
                }

                $(document).on('click', '.lightbox-added', function() {
                    zoomEnabled();
                });
            });
        })(jQuery);
	</script>
	<?php
}

Hello,

I inserted the same in functions.php in a child theme.

The same has not resulted as can be seen in the videos in the link sent. The back button continues to result in returning to a previous page.

Thanks

Hi Ismael,

I checked in Theme Updates:

No Updates available.
You are running the latest version! (4.4.1)

I am using these other scripts in functions, but I do not believe they are affecting something.

// Modal with vídeo

function change_magnific_popup_iframe_setting(){
?>
<script>
jQuery(window).load(function(){
	jQuery('a[href*="youtube.com/watch"], .frame').magnificPopup({
	   type: 'iframe',
	   iframe: {

markup: '<div class="mfp-iframe-scaler fram">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
          '</div>',

	     patterns: {
	       youtube: {
	       	index: 'youtube.com', 
	       	id: 'v=', 
	       	src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1'
	       }
	     }
	   }   
	});      
});
</script>
<?php
}
add_action("wp_footer", "change_magnific_popup_iframe_setting");

// Modal para button and links

function add_custom_script(){
?>
<script>
jQuery(window).load(function(){
jQuery('.open-popup-link-button a, .open-popup-link, #menu-item-6276 a').magnificPopup({
type:'inline',
removalDelay: 50,
 callbacks: {
    beforeOpen: function() {
    this.st.mainClass += ' ' + this.st.el.attr('data-effect');
}
  },
midClick: true 
});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

Hi,
Summarizing, the user can leave the MODAL of 4 different ways:

1 – Clicking the X
2 – Clicking on the background (overlay)
3 – Pressing ESC on keyboard
4 – Clicking on back button in browser / mobile

The following code works for the fourth option (4), but when using the other options to exit MODAL it leaves a url in the browsing history.

<script type="text/javascript">
(function($) {
            $(document).ready(function() {
                function zoomEnabled() {
                    var $zoom =  $('[rel="lightbox"]').length > 0;
                    backDisable($zoom);
                }
                function backDisable($zoom) {
                    if($zoom) {
                      if(window.history&&window.history.pushState) {
                        window.history.pushState(null, null, '');
                        window.onpopstate = function() {
                            $('.mfp-close').trigger('click');
                        }
                        } 
                    }  
                }
                $(document).on('click', '.lightbox-added', function() {
                    zoomEnabled();
                });
             });
        })(jQuery);
</script>

The negative point is:

If you have several MODAL to open at the same URL, the user may have a browsing history filled with the current url, and it is not possible for him to leave the page just by pressing the back button.
Most users in such cases only close the browser window where the URL was and thus leave the site.

The good example are e-commerce portals where the use of the modal to see images of the products is intensive.

EXAMPLE MODAL USAGE

In this link when the modal is triggered (window.history.pushState) inserts the URL in the history of the navigation, but whichever way to close the modal it “removes” the url from the history.
Since it is not possible to delete history elements, I assume it was used (window.history.go (-1)).

• This reply was modified 6 years, 1 month ago by CloudChoice.