0

Using jQuery 1.7.1, I want to show a dialog box to the user for both these circumstances...

  1. Approximately after 15 seconds when the page has finished loading if no user interaction has been done i.e. page scroll, link click. The dialog box should appear.

  2. If after say 10 seconds an interaction (page scroll / form field click) no further action has been done and the user is still on the same page. The dialog box should appear.

The purpose of this is to show a 'do you need any help / feedback' dialog to a user if they are still on the same page for a number of seconds and haven't scrolled or have scrolled and not interacted on the page i.e. clicked a link / form field.

In the dialog i will show a 'No help needed' link which needs to hide the dialog and stop it opening again during the session. So if this link is clicked the dialog and counter must be stopped for the remainder of that php session.

4

1 回答 1

1

查看jQuery UI 的 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-27T14:33:28.527 回答