【问题标题】:jqModal jQuery Plugin - How to Set Timeout on Modal Popup?jqModal jQuery 插件 - 如何在模态弹出窗口上设置超时?
【发布时间】:2010-07-27 02:14:36
【问题描述】:

我正在使用 jQuery 插件 jqModal。

刚接触它,所以我还在学习它的用法。

我要做的是显示弹出窗口 3 秒,然后自动关闭。

基本上,这是我想要的事件流程:

  1. 我的页面加载完毕。
  2. 显示模式弹出窗口“正在连接到 MySite..”
  3. (3 秒后)模态弹窗自动关闭。
  4. 刷新页面(window.location.reload());

这是我目前所拥有的(不多):

HTML:

<div id="jqPopupModal" style="display: none;">Connecting to My Site...</div>

JS:

window.onload = function() {
   showPopup();
   window.location.reload();
}

function showPopup() {
   $('#jqPopupModal').jqm( { modal: true } );
   $('#jqPopupModal').jqmShow();
}

是否有一些参数可以传递给 .jqmShow() 函数来设置窗口的超时时间?或者我应该挂钩 onShow 回调并做一个简单的 setTimeout?

如果第 2 步和第 4 步异步发生也很好:换句话说,页面刷新同时显示 jQuery 弹出窗口。

有什么想法吗?

编辑:

好的,我已经让打开/关闭延迟工作了,但window.location.reload() 没有。这么说根本不会发生延迟。

这是我的代码:

function fbcPopupOnShow() {{
                $('#fbcModalPopup').show();
                window.location.reload();
                window.setTimeout(new function() {{
                    $('#fbcModalPopup').jqmHide();

                }}, 1000);
            }}

            function showFacebookConnectPopup() {{
                $('#fbcModalPopup').jqm( {{ 
                    modal: true,
                    onShow: fbcPopupOnShow
                }});

                $('#fbcModalPopup').jqmShow();
            }}

我希望window.location.reload() 会在显示弹出窗口时重新加载父窗口,而不是其中一个。

编辑 2:

发现无法异步执行重新加载和弹出窗口,因为 jqModal 弹出窗口并不是真正的“弹出窗口”(即未生成新窗口)。它只是一个隐藏的 DIV。

因此,我刚刚更改了代码以在窗口隐藏后重新加载。

【问题讨论】:

    标签: javascript jquery jquery-plugins jqmodal modalpopups


    【解决方案1】:

    使用 onShow 事件在延迟后关闭它(需要 jQuery 1.4+),否则您可以使用 javascript 超时关闭弹出窗口。

    var autoClose = function(hash) { $('#jqPopupModal').delay(3000).jqmHide(); }; 
    $('#jqPopupModal').jqm({ modal: true, onShow:autoClose}); 
    

    【讨论】:

    • 是的,这就是我一直在尝试的。这有效,(打开窗口,关闭)等。但试图让它与 window.location.reload() 一起工作会导致问题。更新的问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多