I'm attempting to create a popup that appears when the user scrolls down to a certain point. The code for this functionality is working well and is provided below.
<div id="spopup" style="display: none;" class="news_sletter">
<a style="position: absolute; top: 7px; right: 10px; color: #555; font-size: 10px; font-weight: bold;" href="javascript:void(0);" onclick="return closeSPopup();">
<img src="images/ico-x.png" width="18" height="18" style="background: #fff;" />
</a>
<div class="side_bar_sub_heading">
<h6>Newsletter </h6>
</div>
<p>Subscribe to our email newsletter for useful tips and resources.</p>
<form>
<div class="form-group blog_form">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email Address">
</div>
<div class="search_btn-3">
<button class="btn btn-default" type="submit">Subscribe </button>
</div>
</form>
</div>
The jQuery code is as follows:
<script>
var isAlreadyPopUp = true;
$(window).scroll(function () {
if(!isAlreadyPopUp){
if ($(document).scrollTop() >= $(document).height() / 25)
$("#spopup").show("slow"); else $("#spopup").hide("slow");
}
});
function closeSPopup() {
$('#spopup').hide('slow');
}
</script>
And here is the CSS:
<style type="text/css">
/* popup css*/
#spopup {
background: hsl(0, 0%, 0%) none repeat scroll 0 0;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 27px;
width: 300px;
position: fixed;
left: 40%;
display: none;
z-index: 10;
margin-bottom: 40px;
text-align: center;
}
</style>
If a user decides not to subscribe and clicks the close button, the popup will successfully close. However, after five or ten minutes, we want the popup to automatically reappear. Can someone please assist with this?
Any help would be appreciated.