2

「sessionTimeout」機能を実装したいので、ユーザーがセカンダリ ウィンドウまたはライトボックスを開いている場合でも、ユーザーは SessionTimeout ポップアップを取得し、ユーザーの応答に従って、親ウィンドウと子ウィンドウの両方が SessionTimeout イベント通知を取得する必要があります。

「 https://github.com/ehynds/jquery-idle-timeout 」のsessionTimeOutプラグインを使用しており、ライトボックスとポップアップの両方が開くメインページ（親ウィンドウ）に実装されています。「メイン」ページで正常に動作しています. しかし、ライトボックスまたはポップアップ ウィンドウで作業している場合でも、メイン ウィンドウ セッションが期限切れになります。

子ウィンドウで作業している場合でも、sessionTimeout はプロンプトを表示しません。しばらく動作しない場合は、プロンプトが子ウィンドウに表示され、子ウィンドウを閉じて親ウィンドウをログオフする必要があります。

以下のコードを見つけてください。

セッション期限切れメッセージのコード:

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="~/Scripts/js/jquery.idletimeout.js"></script>
<script src="~/Scripts/js/jquery.idletimer.js"></script>
<body>
    <div id="dialog" title="Your session is about to expire!">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>You will be logged off in <span id="dialog-countdown" style="font-weight: bold"></span>seconds.</p>
        <p>Do you want to continue your session?</p>
    </div>
</body>
<script type="text/javascript">
    // setup the dialog
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        height: 200,
        closeOnEscape: false,
        draggable: false,
        resizable: false,
        buttons: {
            'Yes, Keep Working': function() {
                $(this).dialog('close');
            },
                'No, Logoff': function() {
                // fire whatever the configured onTimeout callback is.
                // using .call(this) keeps the default behavior of "this" being the warning
                // element (the dialog in this case) inside the callback.
                $.idleTimeout.options.onTimeout.call(this);
            }
        }
    });

    // cache a reference to the countdown element so we don't have to query the DOM for it on each ping.
    var $countdown = $("#dialog-countdown");

    // start the idle timer plugin
    $.idleTimeout('#dialog', 'div.ui-dialog-buttonpane button:first', {
        idleAfter: 600,
        pollingInterval: 2,
        serverResponseEquals: 'OK',
        onTimeout: function() {
            window.location = "/Home/Index/";
        },
        onIdle: function() {
            $(this).dialog("open");
        },
        onCountdown: function(counter) {
            $countdown.html(counter); // update the counter
        }
    });
</script>

ポップアップ ウィンドウ コード:

function basicPopup(url) {
    var popupWindow = window.open(url, 'popUpWindow', 'height=800,width=1350,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=yes');
}

ライトボックスのコード:

 //Lightbox Function
$(document).ready(function () {
    $(".various").fancybox({
        maxWidth: 1000,
        maxHeight: 800,
        fitToView: false,
        width: '80%',
        height: '80%',
        autoSize: false,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none'
    });
});

他に詳細が必要な場合はお知らせください。

提案してください

4

0 に答える 0