Closing a Popup using JQuery

There are many scripts on the web that will endevour to close down a DIV popup. I say endevour because many of them fail to work out of the box. You lose time and the frustration grows. Of course, each use case and scenario are different but still, it's annoying to see the solution fail.

My experience is that one solution did work but only so far. It closed the popup but the Javascript broke the checkbox functionality. The popup was for a newsletter signup and for GDPR reasons you must have a checkbox. I dug out some old Javascript I recalled I had and refurbished it.

The script from a few years ago still worked a charm, regardless of the child elements in the form. Now I am sharing it with you and I'm positive you'll find it useful too. Below, you have your typical DIV popup.

<div id="popup" style="display:none;"></div>

It will sit there doing nothing until invoked with an AJAX call. Let's do just that with the following JQuery.

$(function()
		{
			$(document).ready(function(e) 
			{	
				$("#popup").load("{{ route("public.subscribe.popup") }}").fadeIn("slow");
			});
		});

This will display the newsletter signup popup manually. As I said, one solution worked but it broke the checkout box. Out of curiosity, the form is below.

<div class="container rounded">
		<div class="row">
			<div class="col-md-8 g-0 p-1">
				<h2 class="text-center">Newsletter Sign Up</h2>
				<p class="text-center">Sign up for our regular inspirational travel guides, delivered straight to your inbox</p>

				<div class="px-2">
					<form 
						id="submit_subscriber_form" 
						autocomplete="off" 
						action="#" 
						method="POST" 
						enctype="application/x-www-form-urlencoded"
						accept-charset="utf-8">
						@csrf		
						<div class="form-group">
							<input value="" type="text" class="form-control my-2 subscriber-recipient" name="recipient" placeholder="Enter your best email address" />
										
							<div class="form-check my-2">
								<input type="checkbox" name="acknowledgement" class="subscriber-acknowledgement form-check-input">&nbsp;I acknowledge I have read website privacy policy
							</div>	
							<button id="toggle_subscriber_button" type="submit" class="btn btn-block btn-primary w-100" disabled>Subscribe Now</button>
						</div>
					</form>
				</div>
				<br />
			</div>
			<div class="col-md-4 g-0">
				<img src="{{ config("website.aws.s3.path") }}/iMO92qCOqGa0Z2Wzr7tKfkpOIkkIcjzyNWykZO6m.jpg" width="100%" height="auto" alt="Newsletter Subscribers" />
			</div>
		</div>
	</div>

Using Jquery for Closing a Popup

And now the solution. This one doesn't break anything and I'll swear it does work.

$(document).on("mouseup", function(e) 
   		{
			var ele=$("#popup"); 
			if(ele.is(":visible"))
			{
				if(ele.is(e.target) && ele.has(e.target).length === 0)
				{
					ele.fadeOut("slow"); 
				} 
			}
		});

And that's it. A clean and elegant solution with one function call. Other solutions you may come across on StackOverflow, they have been needlessly over complicated and bloated. Not this one, enjoy.