弹出窗口在 jquerymobile 中不起作用

Posted 2023-05-09

【中文标题】弹出窗口在 jquerymobile 中不起作用

【英文标题】：Popup not working within jquerymobile

【发布时间】：2017-01-09 09:42:33

【问题描述】：

我有点失落 - 我从 jquery 演示页面中获取了一个弹出示例作为模板...

如果我将弹出窗口放在第一页中，它可以工作 - 我可以从 js 脚本中调用它来打开。

因此...以下确实有效

    <div data-role="page" class="page" id="Menu">
    <div data-role="header" data-position="fixed" class="ui-title center">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext">&nbsp;</a>
            <a href="#OrderList" class="ui-btn ui-corner-all width150 htitle OrderList">&nbsp;<span class='htitle'>Barserver.com</span>&nbsp;</a>
            <a href="#" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext">&nbsp;</a>
        </div>
    </div>
    <div id="MainContent">
        <div id="MenuList"></div>    
    </div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="a">
        <h1>Delete Page?</h1>
        </div>
        <div role="main" class="ui-content">
            <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
        </div>
</div>

我可以通过动态打开它

$("#popup").popup("open");

但是，如果我将弹出窗口移动到同一文档中的另一个（数据角色）页面，它不会显示，console.log 中也不会出现错误。谁能引导我前进？以下不起作用...

<div data-role="page" class="page" id="OrderList">
    <div data-role="header" data-position="fixed" class="ui-title text-center">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#Menu" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext Menu">&nbsp;</a>
            <a href="#Menu" class="ui-btn ui-corner-all width150 htitle Menu">&nbsp;<span class='htitle'>Barserver.com</span>&nbsp;</a>
            <a href="#Customer" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext">&nbsp;</a>
        </div>
    </div>
    <div id="OrderListContent" class="productdhtml ui-content"></div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
            <div data-role="header" data-theme="a">
            <h1>Delete Page?</h1>
            </div>
            <div role="main" class="ui-content">
                <h3 class="ui-title">Are you sure you want to delete this page?</h3>
            <p>This action cannot be undone.</p>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
            </div>
    </div>
        </div>

为避免误解 - 第一个代码示例有效，第二个无效（意味着没有错误，没有显示类似对话框的模式）。

为什么？

（当然感谢所有帮助）

【问题讨论】：

我确实发现文档后面有一个未关闭的 div。我解决了这个问题，但仍然没有解决问题。

使用外部弹出窗口，或为每个弹出窗口使用唯一 ID。我会去一个外部弹出窗口***.com/a/22559428/1771795

Omar 你在这里和 jquery 论坛提供了很大的帮助，但我仍然有这个问题。当全局定义或在第一个主页面中定义时，可以在页面初始化时动态打开弹出窗口，但之后的任何页面都无法更改 GUI 或错误。我怀疑我有一些动态不平衡的 div 标签，但到目前为止所有检查都失败了。我将不得不分而治之，直到找到错误为止。不过感谢您的帮助。

不应将外部弹出窗口放置在任何页面内，而应放置在外部； body（页面容器）标签应该是直接父标签。你能分享你的完整代码吗？

我已经通过 W3C 推送了我的代码，并使用 Firefox 中的 Web 开发工具进行了各种检查。我在标签中发现了一个双撇号，没有其他不合适的地方。我很确定问题不是标签不平衡。

【参考方案1】：

我明白了（感谢@Omar 的指导）。编码答案并不容易，但我会在几天内尝试草稿并分享（因为试图解决这个问题，我的工作落后了）。

就本说明而言，当我说“失败”时，我的意思是“没有弹出窗口，地址栏没有变化，没有控制台错误。”

我有一个表格。如果操作员试图离开，则应进行测试以确认输入了所有数据。我所有的 a-href 标签都有页面引用，jquery 优先于我应用的任何其他事件。我没有考虑过这件事的后果。结果？表单显示，未填写完整，操作员选择导航到其他地方，弹出调用开始/结束但“失败”，jquery 快速导航到 a-href 页面中命名的页面。

解决方案： 使用弹出窗口时，不要在 a-href 标签中命名页面。因此，在使用弹出窗口时，请避免

<a href='#Page5'>Page 5</a>

而是

<a href='#' id='page5'>Page 5</a>

并创建一个事件来决定是否应显示弹出窗口，如果不显示，则应导航到第 5 页。

我希望这是有道理的。