Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 21, 2017 at 11:27 am #781109
    asteratos

    Hello there,

    Since I couldn’t find anywhere on the forum, I would like to ask you how the iframe modal window CANNOT be closed (?iframe=true urls), if click outside of its area.

    Two are the things we would like to do :

    1. Not to close the window, if clicked anywhere outside of it
    2. Insert a X close mini mutton in the up-right corner, in order to be able to close it

    Could you please advise how to do this, maybe with CSS?

    Thank you beforehand for your prompt advise.

    • This topic was modified 7 years, 7 months ago by asteratos.
    April 22, 2017 at 7:22 pm #781751
    Mike

    Hey asteratos,
    Please include the url to the page in question so we can take a closer look.

    Best regards,
    Mike

    April 24, 2017 at 11:16 am #782239
    asteratos

    Hey Mike,

    There is nothing wrong with the url. This happens in any url where we insert the modal iframe window.

    I should explain further in order to avoid misunderstandings.

    When I say/write “Not close outside of window” I mean the ability us to make this: NOT to be closed the window, when we click anywhere outside of it.

    Right now, the modal works as it should. It closes when we click outside of it.

    Now we want this: The window not to be closed when we click anywhere outside of it. Instead, to insert a small X icon and when clicking on it, to close the modal window.

    I hope you got now what I mean!

    • This reply was modified 7 years, 7 months ago by asteratos.
    April 25, 2017 at 7:43 pm #783052
    Victoria

    Hi,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    April 26, 2017 at 10:35 am #783370
    asteratos

    Hello,

    You can check the url in prv message.

    Thank you,
    George

    April 27, 2017 at 3:46 pm #784075
    Victoria

    Hi asteratos,

    Here is the code you can put in your funtions.php

    
function av_magnific_popup_adjust(){
?>
 <script>
jQuery(window).load(function(){
	jQuery.magnificPopup.defaults.closeOnBgClick = false;
});
 </script>
<?php
}
add_action('wp_footer', 'av_magnific_popup_adjust');

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 27, 2017 at 3:56 pm #784088
    asteratos

    Thats great excellent!

    Thank you Victoria & Mike! You might consider this for any future Enfold update, if possible for anyone in the avia builder to include an option for iframe modals to close or not, once clicked outside of the modal window.

    Kind regards,
    George

    April 27, 2017 at 4:07 pm #784097
    asteratos

    Sorry, I have one quick question I forgot to mention before closing this thread.

    How is possible to lock the “scroll down” of the entire outside page, once the modal is opened?

    Please see the example in the private link explaining better this at your earliest convenience, and you will understand me at once.

    May 1, 2017 at 5:09 am #785469
    Ismael

    Hi,

    Thank you for the update. Please replace the code with the following.

    function ava_custom_script_fix(){
?>
<script>
(function($){
	function d() {
		$(window).load(function(){
			$.magnificPopup.defaults.closeOnBgClick = false;
		});
	}

	d();
	
	function e() {
		$('body').on('click', '.mfp-iframe', function() {
			var modal = $('.mfp-bg').length;
			if(modal => 1) {
				$('body, html').css('overflow', 'hidden');
			}
		});

		$('body').on('click', '.mfp-close', function() {
			$('body, html').removeAttr('style');
		});
	}

   	e();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_fix');

    Best regards,
    Ismael

    May 1, 2017 at 9:27 am #785601
    asteratos

    Hey Ismael,

    That’s great and thank you for that.

    Just we lost a little bit the smooth effect when opening / closing the modal.

    This happens due to visible / hidden of scrollbar.

    The greatest solution to this is to find a way to always view the scrollbar, just when opening the modal to show the scrollbar with empty scrollable body.

    I want to help you on this and found that:

    — start info —

    hide the scrollbar of body when opening the popup

    document.body.style.overflow = “hidden”;

    and revert back when closing the popup

    document.body.style.overflow = “visible”;

    — end info —

    How could we assign this (or similar as you suggest) in the code you sent me in order to work 100% smooth as described?

    Thank you beforehand for the great support.

    May 2, 2017 at 5:42 am #786129
    Ismael

    Hey!

    It runs smoothly on my end. The code you posted is the same as the script we provided above.

    Regards,
    Ismael

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