CODEWITHSUNDEEP
javascriptjquerypopuptimeoutdelay
Perfectozzio
Perfectozzio

Reputation: 11

What should I add to this code to make popup appear after 10 seconds

I need a visitor to stay for 5-10 seconds on my page until a simple popup appears. I tried the setTimeout function as the close button appears after 30 seconds, but the other elements except for the shadow appeared on a wrong place outside the page. Any ideas how to be correct here? This is the code I have so far: 

var shadow = $('<div id="shadowElem"></div>');
var speed = 1000;
$(document).ready(function() {
    $('body').prepend(shadow);
});
$(window).load( function() {
    screenHeight = $(window).height();
    screenWidth = $(window).width();
    elemWidth = $('#dropElem').outerWidth(true);
    elemHeight = $('#dropElem').outerHeight(true)

    leftPosition = (screenWidth / 2) - (elemWidth / 2);
    topPosition = (screenHeight / 2) - (elemHeight / 2);

    setTimeout(function() {
    $("#dropClose").show();
    }, 30 * 1000);

    $('#dropElem').css({
        'left' : leftPosition + 'px',
        'top' : -elemHeight + 'px'
    });
    $('#dropElem').show().animate({
        'top' : topPosition
    }, speed);

    shadow.animate({
        'opacity' : 0.7
    }, speed);

    $('#dropClose').click( function() {
        shadow.animate({
            'opacity' : 0
        }, speed);
        $('#dropElem').animate({
        'top' : -elemHeight + 'px'
    }, speed, function() {
            shadow.remove();
            $(this).remove();
        });            
    });
});

Upvotes: 0

Views: 151

Answers (2)

Perfectozzio
Perfectozzio

Reputation: 11

That worker, but the screen stayed dark until the popup appeared, because of the shadowElem timing. I added 

  setTimeout(function() {
  $("#shadowElem").show();
  }, 5 * 1000);

and 

    display:none;

to the css at #shadowElem

Also the timing of the popup animation is set to 7 seconds so the difference between the two makes it a bit less frustrating

Upvotes: 0

Ahmed Hashem
Ahmed Hashem

Reputation: 4733

you should use javascript setTimeout() method to delay whatever you want to delay in a specified number of milliseconds.

you should try

setTimeout(function() {
    $('#dropElem').show().animate({
        'top' : topPosition
    }, speed);
}, 10000);

instead of

$('#dropElem').show().animate({
    'top' : topPosition
}, speed);

Upvotes: 2

Related Questions