jQuery Mobile - 多个弹出窗口问题
Posted
技术标签:
【中文标题】jQuery Mobile - 多个弹出窗口问题【英文标题】:jQuery Mobile - Multiple popups issue 【发布时间】:2013-02-13 10:50:57 【问题描述】:我的 jQuery Mobile 网站有问题,我有 3 个单独的页面(在一个 index.html 文件中),所有页面都在成功事件时加载自己的弹出窗口,然后我通过 jQuery 加载弹出窗口,例如:
$( "#myPopupDiv" ).popup( "open" );
这很好用,但是一旦用户访问了一个页面并打开了它的弹出窗口,当访问后续页面时,这些页面上的弹出窗口就不会触发(但是该页面上的弹出窗口在会话期间有效仍然),但是所有代码都可以在页面上运行,并且 Chrome 开发工具中没有控制台错误。
我没有任何重复的 ID,我尝试在 console.log 中放置代码应该触发以打开弹出窗口的位置,这可以正常工作,似乎绕过了打开弹出窗口的代码。
以前有人遇到过这个问题吗?
提前致谢。
简化代码示例
<!-- PAGE 1 -->
<div data-role="page" id="page-1">
<div data-role="content">
<!-- BUTTON: loadPopup-1 -->
<div id="popup-1" data-role="popup">
<!-- Popup contents -->
</div><!-- /popup -->
</div><!-- /content -->
</div><!-- /page -->
<!-- PAGE 2 -->
<div data-role="page" id="page-2">
<div data-role="content">
<!-- BUTTON: loadPopup-2 -->
<div id="popup-2" data-role="popup">
<!-- Popup contents -->
</div><!-- /popup -->
</div><!-- /content -->
</div><!-- /page -->
<!-- JS -->
function loadPopup-1()
$( "#popup-1" ).popup( "open" );
function loadPopup-2()
$( "#popup-2" ).popup( "open" );
因此,如果用户选择第 1 页并打开其弹出窗口,该弹出窗口将继续工作,但第 2 页上的弹出窗口不会,反之亦然。
【问题讨论】:
需要看一些代码...... 更新了一些代码 你什么时候调用loadPopup-*()
函数?
我已经在这个例子中简化了它,但它是实际弹出窗口上方的行,我在 cmets 中输入了 BUTTON: loadPopup-*
然后运行 JS 代码
据我所知,如果页面在 DOM 中,弹出窗口和对话框将触发一次。从 DOM 中删除 .remove()
页面可以解决问题,我正在处理类似的问题。
【参考方案1】:
似乎不可能一次打开多个 JQM 弹出窗口。
来自文档: 注意:不允许链接弹出窗口 该框架目前不支持弹出窗口的链接,因此无法嵌入从一个弹出窗口到另一个弹出窗口的链接。弹出窗口中所有带有 data-rel="popup" 的链接根本不会做任何事情。
这也意味着自定义选择菜单在弹出窗口中不起作用,因为它们本身是使用弹出窗口实现的。如果您在弹出窗口中放置一个选择菜单,它将呈现为原生选择菜单,即使您指定 data-native-menu="false"。
【讨论】:
【参考方案2】:您应该显示更多代码,以便我们了解问题...弹出功能的触发器是什么? 在那之前,我建议你做点别的:
创建一个在活动页面上创建通用弹出窗口的函数,然后将其打开...
示例代码:
function ShowPopUp(PopupText)
// check if popup element already exists
if($("#PopUp").length > 0)
$("#PopUp").remove();
// get active (current) page ID
var id = $.mobile.activePage.attr("id");
// add popup element to the active page
$("#" + id).append("<div data-role='popup' id='PopUp' class='ui-content' data-position-to='window' data-overlay-theme='a'></div>");
// add your text to the popup
$("#PopUp").html(PopupText);
// "refresh" the page with new popup elements
$("#" + id ).trigger('create');
// open the popup
$("#PopUp").popup("open");
【讨论】:
【参考方案3】:试试 https://github.com/serbanghita/jQM-dynamic-popup - 我从 2012 年开始就在生产中使用它。
在你的函数中封装$.dynamic_popup(' ... HTML code ... ');
。您可以触发任意数量的 jQuery Mobile 弹出窗口。
【讨论】:
以上是关于jQuery Mobile - 多个弹出窗口问题的主要内容,如果未能解决你的问题,请参考以下文章
如何从第一个弹出窗口中打开第二个 jquery-mobile 弹出窗口
当用户在弹出窗口之外点击时,防止 JQuery Mobile 关闭弹出窗口