jQuery Mobile关闭对话框并加载其他页面

Question

In jQuery mobile, is it possible when a user opens a new page (lets say example.html), to

• fade in a dialog box (with example.html in the background)
• after 3 seconds the dialog box fades out and
• example.html is now visible

I've setup the dialog but not sure what to do to fade in/fade out the dialog box.

<div data-role="page">
// page
</div>

<div data-role="dialog">
  // dialog box fades in, 3 seconds later, fade out
</div>

Answer 1

Annotate the page and the dialog with a unique id and bind something like this to the pageshow event of the page:

jQuery('#myPageId').bind('pageshow', function() {
    var me = jQuery(this);
    var dialogShown = me.data('dialogShown');
    var dialog = jQuery('#myDialogId');
    if(!dialogShown) {
        me.data('dialogShown', true);
        dialog.one('pageshow', function() {
            setTimeout(function() { window.history.back(); }, '3000');
        });
        jQuery.mobile.changePage(dialog, {transition: 'fade'}); 
    }
});

Answer 2

Use the fadeOut method and you should be able to fade the dialog. Then set a timer to call that 3 seconds after the page has loaded.