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();
  });

});