Vinayaka N Vinayaka N - 15 days ago 5
HTML Question

First scroll down display popup second time scroll down should not display popup using jquery

I am trying to display popup when scroll down. Certain point popup will display that is working fine the code is 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>


Jquery code is below

<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');


}


and CSS is

<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>


My requirement is once user do not want subscribe he will click on close button popup will close successfully, later after five or ten mins again we want to display popup automatically.

Please help me.

Answer

You can create a global variable.

var isAlreadyPopUp;

And you can set the value to 'true' or 'false' according to your need. In this case, while closing, or already scrolled etc.. like below.

isAlreadyPopUp=true;

And once after it, you can always check the isAlreadyPopUp value, if it is true, you don't need to execute your pop up show code.

$(window).scroll(function () {
        if(!isAlreadyPopUp){
                if ($(document).scrollTop() >= $(document).height() / 25)
            $("#spopup").show("slow"); else $("#spopup").hide("slow");
         }
    });
    function closeSPopup() {
        $('#spopup').hide('slow');
 }

Edit:-

You can use a setTimeout function for opening the popup in a time interval.

setTimeout(function(){ alert("Hello"); }, 3000);