Правильный способ отсрочить мою функцию jquery

Question

Я закодировал окно «всплывающее окно» для продажи на страницах моего продукта, а также «маску», которая появляется за всплывающим окном, чтобы уменьшить содержимое страницы за выскакивать.

Оба эти элементы отображаются с помощью следующего кода

<div id="boxes"> 
     <div id="dialog" class="window"> 
      <div class="close"></div> 
     </div> 
     <div id="mask"></div> 
    </div> 
    <div class="page-content"> 
     <a class="show-box"></a> 
    </div> 

    <script> 
     $(document).ready(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}); 
     $('#mask').delay(7000); 
     //transition effect 
     $('#mask').fadeIn(500); 
     $('#mask').fadeTo("slow",0.5); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).delay(7000); 
     $(id).fadeIn(2000);  

     //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(); 
     }); 
     //toggle view link 
     $('#show-box').click(function() { 
     $('#mask').fadeIn(500); 
     $('#mask').fadeTo("slow",0.5); 
     $('.window').fadeIn(500); 
     $('.window').show(); 
     }); 

     }); 
     </script> 

Первоначально сценарий мгновенно загруженного всплывающего окна на document.ready. Я добавил $('#mask').delay(7000); и $(id).delay(7000);, чтобы подождать 7 секунд, прежде чем отображать всплывающее окно.

Это отлично работает, с одним snafu. В течение 7 секунд времени задержки все функциональные возможности наведения страницы теряются. Сама маска имеет фиксированную позицию, охватывающую весь экран, поэтому она как будто элемент маски загружается, даже если он не отображается в течение 7 секунд.

Как правильно задержать всплывающее окно и замаскировать полные 7 секунд, не нарушая при этом функциональность страницы в течение этого времени?

Answer 1

Вы просто используете setTimeout. Создайте функцию, которая обрабатывает все после щелчка, чтобы вы могли эффективно связывать ее и вызывать функцию в настройке.

function delayedFadeIn(){ 
    //place the code you wish to be delayed here 
    ... 
} 

(...)

$(document).ready(function() { 

    var id = '#dialog'; 

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

    setTimeout(delayedFadeIn, 7000); 
    (...) 
}