-
AuthorPosts
-
September 25, 2018 at 2:03 pm #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?
September 25, 2018 at 2:30 pm #1014192I’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#keyyou can f.e. influence the
closeOnBgClick
by : false ( Close the popup when user clicks on the dark overlay )September 26, 2018 at 11:07 am #1014661HI,
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?
September 26, 2018 at 11:29 am #1014670Hi,
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,
IsmaelSeptember 26, 2018 at 1:24 pm #1014713Hi 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.
September 26, 2018 at 4:23 pm #1014843Hi CloudChoice,
Do you mean the browser back button?
Best regards,
VictoriaSeptember 26, 2018 at 4:47 pm #1014866Hi,
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 }
September 27, 2018 at 1:26 am #1015047Hi,
The same script works on my end. Where are you testing this?
Best regards,
IsmaelSeptember 27, 2018 at 2:07 am #1015054Hello,
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
September 27, 2018 at 5:43 am #1015115Hi!
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,
IsmaelSeptember 27, 2018 at 11:27 am #1015225Hi 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');
September 27, 2018 at 2:44 pm #1015303Hi,
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.
September 27, 2018 at 4:13 pm #1015356maybe this could help you: https://stackoverflow.com/questions/22229689/how-to-make-browser-back-close-magnific-popup
and look here – on that it seems to work : http://eugenedae.github.io/Magnific-Popup-History-API-Demo/
link to github: https://github.com/EugeneDae/Magnific-Popup-History-API-Demo
- This reply was modified 6 years, 2 months ago by Guenni007.
September 27, 2018 at 4:16 pm #1015358Hi Guenni007,
Thanks, but this was my first line of action, it also did not work properly.
September 28, 2018 at 11:09 am #1015697on my desctop ismaels code works : https://webers-testseite.de/fullbackground/
can you try if it is on mobile working too?
September 28, 2018 at 11:31 am #1015705Hi 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 }
September 29, 2018 at 1:07 pm #1016037Hi,
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 / mobileThe 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.
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.
October 1, 2018 at 7:04 pm #1016720Hi,
The problem was 100% resolved.
Thank you for all the suggestions that have been given.Thanks
-
AuthorPosts
- You must be logged in to reply to this topic.