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

Question

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

• 淡入对话框（背景为 example.html）
• 3 秒后，对话框淡出并
• example.html 现在可见

我已经设置了对话框，但不确定如何淡入/淡出对话框。

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

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

Answer 1

使用唯一的 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'}); 
    }
});

Answer 2

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