0

jQuery 1.7.1 を使用して、これらの両方の状況でユーザーにダイアログ ボックスを表示したい...

  1. ページのスクロールやリンクのクリックなど、ユーザーの操作が行われていない場合、ページの読み込みが完了する約 15 秒後。ダイアログ ボックスが表示されます。

  2. たとえば 10 秒後にインタラクション (ページ スクロール / フォーム フィールド クリック) が発生した場合、それ以上のアクションは行われず、ユーザーはまだ同じページにいます。ダイアログ ボックスが表示されます。

これの目的は、ユーザーが同じページに数秒間表示されていて、スクロールしていないか、スクロールしてページ上で対話していない場合、つまりクリックした場合に、「ヘルプ/フィードバックが必要ですか」ダイアログをユーザーに表示することです。リンク/フォーム フィールド。

ダイアログに、ダイアログを非表示にし、セッション中に再度開くのを停止する必要がある「ヘルプは必要ありません」リンクが表示されます。したがって、このリンクがクリックされた場合、その php セッションの残りの間、ダイアログとカウンターを停止する必要があります。

4

1 に答える 1

1

jQuery UI のモーダルと 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 に答える