joetm/mouseleave-popup

## mouseleave-popup
<!DOCTYPE html>
<html>
<head>
<title>Mouseout Popup Demonstration</title>
<link href="bootstrap4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align:center;">

Move the mouse outside of the browser window.


<div id="pain" class="jumbotron" style="display:none;width:90%;text-align:center;margin:auto auto;position:fixed;top:5%;left:5%;">
	<button type="button" class="close" aria-label="Close"></button>
	<h1 class="display-3">Hello!</h1>
	<p class="lead">I am here to greatly annoy you!</p>
	<p class="lead">
		<a id="reset_btn" class="btn btn-primary btn-lg" href="#" role="button">Reset</a>
	</p>
</div>

<script type="text/javascript" src="bootstrap4/js/bootstrap.min.js"></script>
<script type="text/javascript">
var popup_open = false;
document.addEventListener("mouseleave", function(event) {
	if (!popup_open) {
		//alert('popped');
		document.getElementById('pain').style.display = 'block';
		popup_open = true;
	}
}, false);
document.getElementById('reset_btn').addEventListener("click", function(event) {
	document.getElementById('pain').style.display = 'none';
	popup_open = false;
}, false);
</script>

</body>
</html>