Close box if clicked out of

Hi @madebytincans,

To close the box if the user clicks outside the popup area, try adding following code in the functions.php file of your child theme or add it in your site using any of the following plugins.

function custom_popup_script(){?>
		<script type='text/javascript'>
		jQuery( "body" ).on( "click", function(e) {
			var target = jQuery(e.target);
			if( ! target.is('#message') )
				jQuery( "#closebox" ).trigger( "click" );
		});
		</script>
<?php }

https://www.ads-software.com/plugins/add-actions-and-filters/
https://www.ads-software.com/plugins/code-snippets/

Best Regards,

For some reason I couldn’t get that to work in the functions file. May be conflict or issue with the theme, unsure. I just put it in the footer. I also noticed if you clicked on something like a heading, div, or other tag inside the #message div it would close, unsure why.

Here’s what I ended up using, unsure if this is efficient code but it worked for this situation. Also added support of touch. Maybe this will help another in the future.

<script type='text/javascript'>
jQuery( "body" ).on( "click touchstart", function(e) {
    var target = jQuery(e.target);
    if( target.closest('#message').length === 0 )
    	jQuery( "#closebox" ).trigger( "click" );

});
</script>

Thanks for pointing me in the right direction.

marked as resolved.

Hi @madebytincans,

You are most welcome.

For some reason I couldn’t get that to work in the functions file. May be conflict or issue with the theme, unsure.

That is because by mistake i didn’t copy whole code. This is the following whole code that you should use in functions.php file of your child theme.

function custom_popup_script(){?>
		<script type='text/javascript'>
		jQuery( "body" ).on( "click", function(e) {
			var target = jQuery(e.target);
			if( ! target.is('#message') )
				jQuery( "#closebox" ).trigger( "click" );
		});
		</script>
<?php }
add_action('wp_footer', 'custom_popup_script');

Thanks for enhancing the solution and sharing it in the community.

Cheers,

Ah, that would do it! Didn’t notice.

Thanks again. You guys support your plugins well.

Hi @madebytincans,

You are always welcome here.

We also like to support others plugins and themes.

Please advise if you have more questions.

Have a great day!

Cheers,

Hi,

A different version to the above, which is to not track every click event with JQuery and instead specifically look for the click event on the #darkbackground ID and then close the box.

// Added for WPMU Pop UP! Plugin to close the popup if the background is clicked on
// Sources:
// https://premium.wpmudev.org/forums/topic/how-do-i-close-the-popup-when-the-user-clicks-on-the-dark#post-714545
// https://www.ads-software.com/support/topic/close-box-if-clicked-out-of?replies=7#post-5232373
function custom_popup_script(){ ?>
		<script type="text/javascript">
		jQuery(function($){
			  $('#darkbackground').click(function() {
					$('#closebox').click();
			  });
			  $('#darkbackground div').click(function(e) {
					e.stopPropagation();
			  });
		});
		</script>
<?php }
add_action('wp_footer', 'custom_popup_script');

Hope that helps someone else,

Matt

Hi Matt,

Thanks for sharing the solution here from our WPMU DEV forum.

Your help is really appreciated.

I hope it will help other users searching for the similar solution but keep in mind the solution you have shared here will only work when Pop Over Style is set to “Dark Background Fixed” and not for other styles.

Have a great day!

Cheers,
Vinod Dalvi