CODEWITHSUNDEEP
javascriptjquery
user3448925
user3448925

Reputation: 199

auto close popup every time it opens ( jquery/javascript)

I'm trying to auto-close the popup every time I open it. But with the below code popup closes only the first time. I have to refresh the browser every time to auto-close the popup. Please help me to write code to auto-close the popup every time. Thank you in advance.

  var timeout = window.setTimeout(function(){ 
  //close the popup here
   $('.popup').stop().fadeOut('medium');
  }, 10000);
I tried close instead of stop, its not working. and the dialog is also not working

Upvotes: 0

Views: 516

Answers (1)

Jackom
Jackom

Reputation: 436

To automatically close a popup every time we start it, we need to insert the fadeOut() function inside a condition that establishes whether the popup is visible or not as in this example:

if($('#popup').is(':visible')){
         var timeout = window.setTimeout(function(){
            $('#popupContact').stop().fadeOut('medium');
            $('#backgroundPopup').stop().fadeOut('medium');
        }, 5000);
}

Instead this is the complete example and it works:

$("#button").click(function() {
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popup").fadeIn("slow");
        
         if($('#popup').is(':visible')){
         var timeout = window.setTimeout(function(){
            $('#popup').stop().fadeOut('medium');
            $('#backgroundPopup').stop().fadeOut('medium');
        }, 10000);
        }
 });
 
#backgroundPopup{
    display:none;
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000000;
    border:1px solid #cecece;
    z-index:1;
}
#popup{
    display:none;
    position:fixed;
    height:384px;
    width:408px;
    background:#FFFFFF;
    border:2px solid #cecece;
    z-index:2;
    padding:12px;
    font-size:13px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="button"><input type="submit" value="Press me please!" /></div> 
<div id="popup">  
    <p>
    SIMPLE POPUP
    </p> 
</div>  
<div id="backgroundPopup"></div>

Upvotes: 1

Related Questions