X秒钟的页面滚动后显示jQuery对话框

Question

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 ie 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 ie 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.

Answer 1

Look into jQuery UI's modal and sessionStorage.

Here is an example of what you might look for:

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

And a working example at JSfiddle

Please mind you that sessionStorage doesn't work on JSfiddle, so I used a object called fakeSessionStorage to cover for that.

Also, sessionStorage doesn't work in Internet Explorer 7 or earlier.

[edit]
I had the wrong fiddle linked, fixed that.

[edit 2]
Having the timeoutStarted variable there was apparently the problem. I thought it was a neccessary thing but it was doing more bad than good.