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:
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.
Use the onShow event to close it after a delay (requires jQuery 1.4+), otherwise you can just use javascript timeouts to close the popup.
var autoClose = function(hash) { $('#jqPopupModal').delay(3000).jqmHide(); };
$('#jqPopupModal').jqm({ modal: true, onShow:autoClose});