jqModal jQuery Plugin - How to Set Timeout on Modal Popup?

Question

Hi All,

I'm using the jQuery Plugin jqModal.

New to it, so i'm still learning its usage.

What i'm trying to do is show the popup for say 3 seconds, then automatically close.

Basically, here is the flow of events i want:

1. My page loads.
2. Show modal popup saying "Connecting to MySite.."
3. (after 3 seconds) modal popup automatically closes.
4. Refresh page (window.location.reload());

Here's what i have so far (it's not much):

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

Is there some argument i can pass to the .jqmShow() function to set a timeout for the window? Or should i hook into the onShow callback and do a simple setTimeout?

It would also be nice if step 2 and 4 happens asynchronously: in other words, page refreshes whilst jQuery popup is shown.

Any ideas?

EDIT:

Okay so i've got the open/close delay working, but not with the window.location.reload(). Putting that is causes no delay to happen at all.

Here's my code:

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

                }}, 1000);
            }}

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

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

I was hoping window.location.reload() would reload the parent window WHILST the popup is being shown, not one or the other.

EDIT 2:

Figured out cant do the reload and popup asynchronously, as the jqModal popup isnt really a "popup" (i.e a new window is NOT spawned). It's just a hidden DIV.

Therefore i've just changed my code to do the reload AFTER the window is hidden.

Answer 1

Use the onShow event to close it after a delay (requires jQuery 1.4+), otherwise you can just use javascript timeouts.

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