Make pop-up open after a while

Asked

Viewed 445 times

1

I have a pop-up and would like it to open after the user is already a while at given link.

My JS is like this:

 if($('.popup-banner').length > 0) {
    (window.location.href === '/')
    $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
        $('.popup-overlay, .popup-banner').fadeOut(400);
    });
}

Where do I put the delay?

javascript

  • Utilize setTimeout( function() { /* Seu código */ }, delayEmMilissegundos);

2 answers

1


Use setTimeout and show the popup with .fadeIn(), in this way:

if($('.popup-banner').length > 0) {
    (window.location.href === '/')

    setTimeout(function(){
       $(".popup-banner").fadeIn();
    }, 3000); // 3000 = 3 segundos

    $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
        $('.popup-overlay, .popup-banner').fadeOut(400);
    });
}

Example:

if($('.popup-banner').length > 0) {
    (window.location.href === '/')
    
    setTimeout(function(){
       $(".popup-banner").fadeIn();
    }, 3000); // 3000 = 3 segundos
    
    $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
        $('.popup-overlay, .popup-banner').fadeOut(400);
    });
}
.popup-banner{
   display: none;
   background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Aguarde 3 segundos...
<div class="popup-banner">
   pop up
</div>

0

I have kept only what will make the element open:

setTimeout( function() {
   $('.popup-overlay, .popup-banner').fadeOut(400);
},3000)

This causes the click function to stop working, since the idea is to open automatic.

If you want to keep the click, keep your existing code (which only deals with the click) and add this new one, which will do the same thing, but considering ONLY the time.

Note that 3000 is the time in milliseconds.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.