更新子(Popup或Lighbox)和父窗口事件以进行会话超时

时间:2013-10-03 18:30:29

标签: javascript jquery jquery-ui session session-timeout

我想实现“sessionTimeout”功能,所以即使用户打开了一个辅助窗口或灯箱,用户也应该获得SessionTimeout弹出窗口并根据用户的响应,两个Parenta nd子窗口都应该获得SessionTimeout事件通知:

我正在使用来自“ https://github.com/ehynds/jquery-idle-timeout ”的sessionTimeOut插件,并在主页面(父窗口)上实现Lightbox和Popup打开的位置,它在“主”页面上工作正常。但即使我正在使用Lightbox或Popup窗口,主窗口会话也会过期。

你能否建议我应该怎么做,即使我正在处理子窗口,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'
    });
});

如果您需要任何其他细节,请与我们联系。

请建议

0 个答案:

没有答案