Delay popup 60 seconds

Question

I am using the following script to bring up a popover on my client's page. She has requested that it be delayed 60seconds. I am using setTimeout , but I'm having trouble implementing it. It is delaying #mask , but not #boxes #dialog

You can view the site here: http://www.julialucille.com/

Any help would be appreciated, thank you! Here is my script.

$(document).ready(function() {  

    setTimeout(function(){
        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     

        $('#mask').fadeTo("slow",0.3); 
        $('#boxes #dialog').fadeTo("slow"); 

    }, 60000);

    //if close button is clicked
    $('.window .close').click(function (e) {

        //Cancel the link behavior
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });

});

Answer 1

Make sure both #mask and #dialog are both set to display: none; in the CSS, then use setTimeout according to the following script

 $(document).ready(function() { setTimeout(function(){ var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeTo("slow",0.3); $(id).fadeTo("slow", 1); }, 30000); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); });