关闭前一个弹出窗口后，jQuery Mobile 弹出窗口不打开答案

【问题标题】：jQuery Mobile popup does not open after closing previous popup关闭前一个弹出窗口后，jQuery Mobile 弹出窗口不打开
【发布时间】：2014-04-21 02:20:53
【问题描述】：

我有一个 jQuery 弹出窗口，它接受可能导致错误的用户输入。如果出现错误，我希望出现第二个弹出窗口，但我无法正常工作。

这是一个简化的示例，我在 jsfiddle 中也有：http://jsfiddle.net/tz4ju/2/

HTML：

<div data-role="page" id="home">
    <div data-role="popup" id="errorDialog" class='ui-corner-none ui-content'>
        <p id="errormsg"></p>
    </div>

    <div data-role="popup" id="addFolderDialog" class='ui-corner-none portalpopup'>
        <div data-role='content'>
            <p></p>
            <div data-role="fieldcontain">
                <label for="name">New Folder:</label>
                <input type="text" name="name" id="newfolder_val" value="" class="ret_submit" rel="adddir_submit" />
            </div>
            <div class="clearfix">
                <a data-role="button" data-inline="true" data-theme="b" id="adddir_submit" onclick='create_folder_submit()'>Add Folder</a>
                <a data-role="button" data-inline="true" data-rel='back'>Cancel</a>
            </div>
        </div>
    </div>

    <p><a href="#addFolderDialog" data-rel="popup">Open Popup</a></p>
</div>

JavaScript：

window.create_folder_submit = function () {
    $("#addFolderDialog").popup("close");
    $("#errormsg").text("ERROR!");
    $("#errorDialog").popup("open");
}

顺便说一句，如果我在其他任何地方拨打$("#errorDialog").popup("open")，它就可以工作。我做错了什么？

【问题讨论】：

不知道 jquery 是最好的，但您是否尝试过任何使用 CSS z-index 的方法来确保它显示在顶部而不是当前叠加层的后面？
我检查了 z-index，没关系。另外，我应该澄清一下，我正在关闭以前的叠加层，然后打开新的叠加层，因此在任何时间点都应该只有 1 个叠加层可见。
查看jsfiddle.net/aravinth/tz4ju/17
酷，行得通。我不知道为什么。同样奇怪的是，当我将 setTimeout 设置为 0 时它可以工作，但是如果我删除 setTimeout 并尝试直接打开错误对话框，它就会中断。无论哪种方式都有效。
@Aravinth 如果您添加答案，我会接受。

标签： javascript jquery jquery-mobile

【解决方案1】：

据此Documentation (see at the page end) 链接弹出窗口在 jquery mobile 中是不允许的。

您可以实现如下所示的链接弹出窗口。

$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
    popupafterclose: function() {
        setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
    }
});
});

参考这个Fiddle Demo

【讨论】：

也感谢您的解释。
这还是同一个问题吗？我正在使用延迟策略，但即使使用 350，它似乎有时也会在较慢的设备上出现问题。我们仍然没有可靠的方法来做到这一点吗？

【解决方案2】：

检查您的浏览器弹出窗口拦截器。所以需要使用setinterval来触发。

像这样写你的js，

window.create_folder_submit = function () {
    $("#addFolderDialog").popup("close");
    $("#errormsg").text("ERROR!");
    var popup = setInterval(function(){
        $("#errorDialog").popup('open');
        clearInterval(popup);
    },1);
};

SEE THIS WORKING FIDDLE DEMO

【讨论】：

这在我的机器上不起作用。当我增加延迟时，它确实如此，但这似乎是一个很大的黑客攻击。它启发了我尝试 $( "#addFolderDialog" ).bind({ popupafterclose: function(event, ui) { console.log('close add') $("#errormsg").text("ERROR!"); $("#errorDialog").popup('open'); } });没有成功。

【解决方案3】：

实际上使用 popupafterclose 事件是行不通的，因为每次离开弹出窗口时都会触发它。即使您单击“取消”。你应该在关闭和打开之间做一个简单的延迟。

【讨论】：