Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1014178

    Hi,

    I this is my actual code in function.php to call magnific popup. (Working without problems)

    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');
    

    I WOULD LIKE to close the popup and no change the url when user click in back button BECAUSE many user are continuous using the back button to close modal/popup.

    I tried the follow code:

    function add_custom_script(){
    ?>
    <script>
    var magnificPopup=null;
    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');
    },
    open: function(){
                        History.Adapter.bind(window,'statechange',closePopup);
                        History.pushState({url:document.location.href},document.title,"?large");
                        jQuery(window).on('resize',closePopup);
                        magnificPopup = this;
                    },
    close: function(){
                        jQuery(window).unbind('statechange',closePopup)
                            .off('resize',closePopup);
                        var State = History.getState();
                        History.replaceState(null,document.title,State.data["url"]);
                        magnificPopup = null;
                    }
      },
    midClick: true 
    });
    });
    function closePopup() {
        if (magnificPopup != null)
            magnificPopup.close();
    };
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    BUT NOT WORKING, the page continues returning to previous page in navigation history

    Could you give me a suggestion of the best way?

    #1014192

    I’m not sure what you want to achieve.
    Do you have a link where I can have a look?

    do you mean by back button the darkend background besides the lightbox?
    there are alot of parameters you can set – but i have no clue what you try to achieve.
    http://dimsemenov.com/plugins/magnific-popup/documentation.html#key

    you can f.e. influence the
    closeOnBgClick
    by : false ( Close the popup when user clicks on the dark overlay )

    #1014661

    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?

    #1014670

    Hi,

    Thank you for using Enfold.

    You can try this script instead.

    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
    }

    Best regards,
    Ismael

    #1014713

    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.

    #1014843

    Hi CloudChoice,

    Do you mean the browser back button?

    Best regards,
    Victoria

    #1014866

    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
    }
    #1015047

    Hi,

    The same script works on my end. Where are you testing this?

    Best regards,
    Ismael

    #1015054

    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

    #1015115

    Hi!

    What is the version of the theme? I think it’s using an old version because the “mfp-zoom-out-cur” class attribute is not being applied to the body tag when a lightbox is active.

    Best regards,
    Ismael

    #1015225

    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');
    
    
    #1015303

    Hi,

    It may be that I’m talking nonsense, but I inserted the class .mfp-zoom-out-cur manually but still, the script did not run.

    #1015356
    #1015358

    Hi Guenni007,

    Thanks, but this was my first line of action, it also did not work properly.

    #1015697

    on my desctop ismaels code works : https://webers-testseite.de/fullbackground/

    can you try if it is on mobile working too?

    #1015705

    Hi Guenni007,

    I did some modifications and now is working.

    The challenge now is to make the methods to close the popup on the screen (by clicking on the x or the light box) to return one level in the history.
    Preventing from harming user navigation, by creating successive equal entries of history. You’re having the same problem if you check your browsing history.

    – Also insert a small failback for compatibility issues in (window.history.pushState).

    https://developer.mozilla.org/en-US/docs/Web/API/History_API#Browser_compatibility

    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 =  $('[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');
                            };
                  
                            $().magnificPopup({
                                    type:'inline',
                                    callbacks: {
                                        open: function() {
                                            $.magnificPopup.instance.close = function() {
                                                window.history.go(-1)
                                                $.magnificPopup.proto.close.call(this);
                                                
                                            };
                                        }
                                    }
                                });
    
                            } 
                        }  
                    }
    
                    $(document).on('click', '.lightbox-added', function() {
                        zoomEnabled();
                    });
                    
                });
            })(jQuery);
    	</script>
    	<?php
    }
    
    #1016037

    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, 2 months ago by CloudChoice.
    #1016720

    Hi,

    The problem was 100% resolved.
    Thank you for all the suggestions that have been given.

    Thanks

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.