jQuery Mobile关闭对话框并加载不同的页面

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

在jQuery mobile中，当用户打开一个新页面（比如example.html）时，它是否可能

fade in a dialog box (with example.html in the background)
淡入对话框（在后台使用example.html）
after 3 seconds the dialog box fades out and
3秒后，对话框淡出并且
example.html is now visible
example.html现在可见

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>

2 个解决方案

#1

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

使用唯一ID注释页面和对话框，并将类似的内容绑定到页面的pageshow事件：

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

#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.

使用fadeOut方法，您应该能够淡化对话框。然后设置一个计时器，在页面加载后3秒钟调用。

#1