Jquery Mobile - 没有样式的弹出窗口答案

【问题标题】：Jquery Mobile - Popup without styleJquery Mobile - 没有样式的弹出窗口
【发布时间】：2013-12-21 10:37:10
【问题描述】：

我读过弹出窗口应该在调用它们的锚点的同一页面中；但是它如何处理多页页面？

我遇到的问题是弹出窗口出现了，但其中的元素不是 jquerymobile 样式，它们看起来很普通...

这行得通：

<body>
    <a onclick="$('#categoriesPopup').popup('open');" data-role = "button">Open</a>
    <div data-role="popup" id="categoriesPopup" class="ui-content">
        <ul data-role="listview">
            <li>Weapons</li>
            <li>Shields</li>
            <li>Armor</li>
        </ul>
    </div>
</body>

这不起作用：

<body>
    <div data-role="page" id = "title" data-title="Troria">
        <a onclick="$('#categoriesPopup').popup('open');" data-role = "button">Open</a>
        <div data-role="content">
            <div data-role="popup" id="categoriesPopup" class="ui-content">
                <ul data-role="listview">
                    <li>Weapons</li>
                    <li>Shields</li>
                    <li>Armor</li>
                </ul>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

我看不出有什么区别：jsfiddle.net/FaFhz，jsfiddle.net/FJRbs 检查并发布其余代码 ^^
我发现了问题！我在好像不喜欢双重初始化（？）
好像很高兴知道它^^很高兴
JQM 和 $(document).ready 绝对不行！见jqm文档：demos.jquerymobile.com/1.2.1/docs/api/events.html

标签： jquery jquery-mobile

【解决方案1】：

问题是我在 document.ready 中调用了 popup() 初始化，似乎它与双重初始化搞砸了（因为数据角色“popup”）

<script>
$( document ).ready( function(){
    $("#categoriesPopup").popup();
} );
</script>

【讨论】：

如果您使用的是 JQM 1.4 并且弹出窗口是外部的，那么您的解决方案是正确的。如果您使用的是旧版本，则不正确。弹出窗口应作为页面 div 的子级放置。
我正在使用 JQM 1.3.2，似乎在第一个代码示例中它将正文作为基页，因此它可以工作。无论如何，我会选择第二个更正确的例子。