jQuery Mobile - 多个弹出窗口问题

时间:2013-02-27 15:01:48

标签: jquery jquery-mobile popup

我的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页上的弹出窗口不会,反之亦然。

3 个答案:

答案 0 :(得分:4)

似乎不可能一次打开多个JQM弹出窗口。

来自doco: 注意:不允许链接弹出窗口 该框架目前不支持弹出窗口的链接,因此无法将一个弹出窗口中的链接嵌入到另一个弹出窗口中。弹出窗口内所有带有data-rel =“popup”的链接都不会做任何事情。

这也意味着自定义选择菜单在弹出窗口内不起作用,因为它们本身是使用弹出窗口实现的。如果在弹出窗口中放置一个选择菜单,它将呈现为本机选择菜单,即使您指定data-native-menu =“false”。

答案 1 :(得分:3)

您应该显示更多代码,以便我们可以理解问题...弹出功能的触发器是什么? 在那之前,我建议你做点别的事情:

创建一个在活动页面上创建通用弹出窗口的函数,然后打开它......

示例代码:

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");

}

答案 2 :(得分:1)

尝试https://github.com/serbanghita/jQM-dynamic-popup - 自2012年以来,我已在生产中使用此功能。

在您的函数中封装$.dynamic_popup(' ... HTML code ... ');。您可以根据需要触发尽可能多的jQuery Mobile弹出窗口。