- 首页
- 其他开发
- 如何从第一个弹出窗口打开第二个 jquery-mobile 弹出窗口
如何从第一个弹出窗口打开第二个 jquery-mobile 弹出窗口
[英] How can I open a second jquery-mobile popup from the first popup
本文介绍了如何从第一个弹出窗口打开第二个 jquery-mobile 弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 jquery-mobile 我试图在用户点击删除时从第一个弹出窗口打开第二个弹出窗口(以确认).
我看到了一个类似的线程，可以使用 jsfiddle 代码 http://jsfiddle.net/EWQ6n/520/ 此处:在 JQuery 的对话框中打开对话框移动
但是，即使将这个有效的弹出代码复制并粘贴到我的 jsfiddle 中也不起作用.我使用 jQuery 1.10.1 和 1.4.2 移动版.上面线程中的工作jsfiddle使用1.9.使用移动 1.30b.1 当我将 jquery 更改为旧版本时，它可以工作.(我知道，这似乎是一个简单的答案，但现在更改会弄乱其他代码依赖和样式.我想了解这个问题.)
<div data-role="popup" id="popupInfo" data-dismissible="false" style="max-width:400px;"><div data-role="header" class="ui-corner-top"><h1>联系方式</h1>
<div data-role="content" data-theme="a"><label for="name">名称:</label><input type="text" name="name" id="name" value="" placeholder="显示名称" data-theme="a"><label for="tel">号码:</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">取消</a><a href="#popupDelete" data-role="button" data-rel="popup" data-transition="flow" data-icon="minus">删除</a>
<!-- 第二个弹出窗口--><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>删除联系人?</h1>
<div data-role="content" data-theme="dd"><h3 class="ui-title">您确定要删除<span>#</span>来自您的联系人?</h3><p>此操作无法撤消.</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">取消</a>
我还在 jsfiddle 中注意到，我的第一个弹出代码中的最后 2 个 div 是红色的.(这是否意味着它们无效?)在我的编辑器中，它们似乎是有效的 html - 至少我找不到任何问题.
这是我的非工作 jsfiddle:http://jsfiddle.net/gmdavis62/7AuNC/2/
解决方案
感谢@ezanker，我有了一个解决方案.遵循另一篇文章中的 popup api 链接，我找到了一个不涉及插件的简单解决方案
$(document).on("pageinit", function () {$('#del').click(function (e) {//e 是事件设置超时(函数(){$("#popupDelete").popup("打开")}, 100);});});
我有一个 jsfiddle 来演示这个.
Using jquery-mobile I am trying to open a second popup (to confirm) from the first popup when the user clicks delete.
I have seen a similar thread with working jsfiddle code http://jsfiddle.net/EWQ6n/520/ here: Opening Dialog from within a Dialog in JQuery Mobile
However, even copying and pasting this working pop-up code into my jsfiddle does not work. I am using jQuery 1.10.1 with 1.4.2 mobile. The working jsfiddle in the thread above is using 1.9. with mobile 1.30b.1 When I change my jquery to the older versions, it works. (I know, that seems like the easy answer but changing now will mess up other code dependencies and styles. I want to understand this problem.)
<!-- 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>
I also noticed in jsfiddle, the last 2 divs inside my first popup code are red. (does this mean they are invalid?) In my editor they do seem to be valid html - at least I cannot find any problems.
This is my non-working jsfiddle: http://jsfiddle.net/gmdavis62/7AuNC/2/
解决方案
Thanks to @ezanker, I have a solution. Following the popup api link from the other post, I found a simple solution that doesn't involve a plug in.
$(document).on("pageinit", function () {
$('#del').click(function (e) { // e is the event
setTimeout(function () {
$("#popupDelete").popup("open")
}, 100);
});
});
I have a jsfiddle to demo this.
这篇关于如何从第一个弹出窗口打开第二个 jquery-mobile 弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
