javascript - 无法使用 jQuery Mobile 1.3.1 显示弹出窗口

Question

我正在尝试弹出一个非常简单的“你确定吗？” jQuery Mobile 中的弹出窗口。但如果我在按钮上使用 data-rel="popup" ，则不会发生任何情况。如果我删除 data-rel 它会打开 - 但作为一个完整的窗口。逻辑运行良好，但我仍然希望看到一个弹出窗口。

这是代码(简化 - 我删除了其他页面、标题、html 等 - 除了这个问题之外，该应用程序运行良好，因此无需调试这些)。要查看的 2 个元素是按钮“clearHistory”和弹出窗口本身“history”:

<!-- history page -->
<div data-role="page" id="history">
    <div data-role="header" data-position="fixed">
        <a href="#" data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
        <h1>History</h1>
        <a href="#deletePopup" data-role="button" data-rel="popup" id="clearHistory" data-icon="delete" data-iconpos="notext" data-theme="d">Delete</a>
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview" id="historyList" data-inset="true" data-theme="f"></ul>
        <h4 id="historyEmpty">History is empty</h4>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4><a class="ttg" href="http://www.TravelingTechGuy.com" rel="external" target="_blank">Traveling Tech Guy</a></h4>
    </div><!-- /footer -->       
</div>
<!-- end history page -->

<!-- delete history popup -->
<div data-role="popup" id="deletePopup" data-overlay-theme="a" data-theme="c" data-dismissible="false">
    <div data-role="header" data-theme="a">
        <h1>Delete History?</h1>
    </div>
    <div data-role="content" data-theme="d">
        <h3>Delete all items in history?</h3>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="d" id="deleteHistory">Delete</a>
    </div>
</div>
<!-- delete history popup -->

知道我在这里错过了什么吗？

Answer 1

将弹出窗口放在 <div data-role=page> 内该 div 应该是弹出 div 的直接父级。我放在<div data-role=content>之前在下面的演示中。

Demo

对话框应放置在 <div data-role=page> 之外因为它们被视为一个页面。