顯示頁面滾動的X秒後jQuery的對話框

使用jQuery 1.7.1，我要顯示一個對話框，用戶對於上述兩種情況......顯示頁面滾動的X秒後jQuery的對話框

大約15秒後，當頁面已完成加載如果沒有用戶交互已完成，即頁面滾動，鏈接點擊。應該出現對話框。
如果說10秒後交互（頁面滾動/表單字段單擊）沒有進一步的操作，用戶仍然在同一頁面上。應該出現對話框。

這樣做的目的是顯示「你需要任何幫助/反饋」對話框，用戶如果他們仍然爲一些秒的同一頁上，並沒有滾動或已經滾動，而不是在頁面上互動，即點擊鏈接/表單字段。

在對話框中，我將顯示一個'不需要幫助'的鏈接，它需要隱藏對話框並在會話期間停止再次打開對話框。所以如果這個鏈接被點擊了，那麼對話框和計數器必須在該PHP會話的其餘部分停止。

來源

2013-08-27 David G

看看jQuery的UI。另外，你已經嘗試過什麼？ – MisterBla

我相信你錯誤標記了PHP，這裏沒有任何關聯。 –

@DarylGill會話是PHP。但他可以使用cookie或sessionStorage。 – MisterBla

調查jQuery UI's modal和sessionStorage。

以下是你可能會找什麼一個例子：

function showHelpModal() 
{ 
    // Open the dialog and reset the timer 
    $('#mymodal').dialog('open'); 
    timeoutStarted = false; 
} 

var t; // Timeout variable 
var timeout = 1500; // Timeout in milliseconds 
var fakeSessionStorage = {}; // The fake sessionStorage, don't use this in your real code 

$(document).ready(function() 
{ 
    // Initialize the dialog 
    $('#mymodal').dialog(
    { 
     autoOpen: false, 
     height: 500, 
     width: 500, 
     modal: true, 
     buttons: { 
      "Don't remind me": function() 
      { 
       fakeSessionStorage.stopReminding = true; 
       $(this).dialog('close'); 
      }, 

      "Yes, please": function() 
      { 
       $(this).dialog('close'); 
      } 
     } 
    }); 

    // Set default reminder value 
    if(!fakeSessionStorage.stopReminding) 
     fakeSessionStorage.stopReminding = false; 

    // On scroll... 
    $(document).scroll(function() 
    {   
     // If the user doesn't want to be reminded, return false 
     if(fakeSessionStorage.stopReminding) 
     { 
      console.log("Will not remind again"); 
      return false; 
     } 

     // Start the timer and prevent it from firing while busy 
     timeoutStarted = true; 
     clearTimeout(t); 
     t = setTimeout(showHelpModal, timeout); 
    }); 
});

而在JSfiddle

工作的例子請介意你的sessionStorage不上的jsfiddle工作，所以我用了一個對象調用fakeSessionStorage來掩飾這一點。

另外，sessionStorage在Internet Explorer 7或更低版本中不起作用。

我錯了小提琴鏈接，修正了這一點。

[編輯2]
具有timeoutStarted變量有明顯的問題。我認爲這是一件必要的事情，但它做得比壞好多了。

來源

2013-08-27 14:33:28 MisterBla

謝謝這正是我一直在尋找的！偉大的幫助 –

一直在看這個和jsfiddle的例子，它在滾動停止後立即加載，而不是在他們超時後，我認爲通過查看它應該是的代碼。這是否也是一個類似的問題......滾動時也會觸發（無論是單擊滾動條箭頭按鈕還是抓取滑動條並在一瞬間改變方向而沒有暫停時，請參閱JSfiddle，您可以提出任何編輯對於這個？ –

@DavidG看看我的新代碼的答案和解釋原因。這應該做你需要的。 – MisterBla

顯示頁面滾動的X秒後jQuery的對話框

回答

相關問題