如何从第一个弹出窗口中打开第二个 jquery-mobile 弹出窗口

Posted

技术标签:

【中文标题】如何从第一个弹出窗口中打开第二个 jquery-mobile 弹出窗口【英文标题】:How can I open a second jquery-mobile popup from the first popup 【发布时间】:2014-06-18 01:27:52 【问题描述】:

当用户单击删除时,我正在尝试使用 jquery-mobile 从第一个弹出窗口中打开第二个弹出窗口(以确认)。

我在这里看到了一个使用 jsfiddle 代码http://jsfiddle.net/EWQ6n/520/ 的类似线程:Opening Dialog from within a Dialog in JQuery Mobile

但是,即使将这个有效的弹出代码复制并粘贴到我的 jsfiddle 中也不起作用。我正在使用带有 1.4.2 移动设备的 jQuery 1.10.1。上面线程中的工作 jsfiddle 使用的是 1.9。使用移动版 1.30b.1 当我将 jquery 更改为旧版本时,它可以工作。(我知道,这似乎是一个简单的答案,但现在更改会搞砸其他代码依赖和样式。我想了解这个问题。)

    <!-- first popup -->
<div data-role="popup" id="popupInfo" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" class="ui-corner-top">
         <h1>Contact Info</h1>
    </div>
    <div data-role="content" data-theme="a">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" placeholder="Display name" data-theme="a">
        <label for="tel">Number:</label>
        <input type="tel" name="tel" id="tel" value="" placeholder="tel" data-theme="a">
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>
<a href="#popupDelete" data-role="button" data-rel="popup" data-transition="flow" data-icon="minus">Delete</a>
    </div>
</div>

<!-- second popup -->        
<div data-role="popup" id="popupDelete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
    <div data-role="header" data-theme="aa" class="ui-corner-top">
         <h1>Delete Contact?</h1>

    </div>
    <div data-role="content" data-theme="dd">
         <h3 class="ui-title">Are you sure you want to delete <span>#</span> from your contacts?</h3>

        <p>This action cannot be undone.</p>
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all ui-btn-inline">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>

    </div>
</div>

我还在 jsfiddle 中注意到,我的第一个弹出代码中的最后 2 个 div 是红色的。 (这是否意味着它们无效?)在我的编辑器中它们似乎是有效的 html - 至少我找不到任何问题。

这是我的非工作 jsfiddle:http://jsfiddle.net/gmdavis62/7AuNC/2/

【问题讨论】:

仅供参考,当我将整个项目更改为旧版本的 jquery 时,所有样式都完全混乱了。所以,这不仅仅是一个学术问题。 看看这里:***.com/questions/23355959/… 检查这个***.com/questions/22572518/…和这个***.com/questions/23189886/… 【参考方案1】:

感谢@ezanker,我有一个解决方案。继另一篇文章中的popup api link 之后,我找到了一个不涉及插件的简单解决方案。

$(document).on("pageinit", function () 
  $('#del').click(function (e)  // e is the event
    setTimeout(function () 
        $("#popupDelete").popup("open")
    , 100);
  );
);

我有一个jsfiddle 来演示这个。

【讨论】:

谢谢@gmdavisUX 它对我有帮助。投票:)

以上是关于如何从第一个弹出窗口中打开第二个 jquery-mobile 弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章

从第一个 UIAlertController 打开第二个 UIAlertController

如何通过单击主页中的按钮将数据从第二页传输到第三页

如何打开一个新表单然后从第二个表单返回到第一个表单而不关闭并重新打开第一个表单

来自 Laravel 循环的引导弹出窗口

打开第二个窗口后隐藏主窗口?另外,当第二个窗口被用户关闭时,主窗口如何重新出现?

如何操作页面多个窗口?