链接到来自标题时，jQuery 移动弹出窗口不显示答案

【问题标题】：jQuery mobile popup not displaying when linked to from header链接到来自标题时，jQuery 移动弹出窗口不显示
【发布时间】：2014-10-18 21:37:23
【问题描述】：

我正在尝试使用 jQuery mobile 创建网页，我的网站的一部分包含登录功能，我正在尝试在页面上的弹出窗口中显示登录表单。链接到弹出窗口的按钮位于页面的标题中。

我的问题是当我点击登录按钮时弹出窗口不显示：/

我尝试从div 中删除ui-selectmenu-hidden 类，但这导致页面加载后弹出窗口显示时没有jQuery 样式。

我知道我的代码在没有 page 或 header 数据角色的情况下可以工作，因为我在另一个文档上测试了没有 divs 的确切代码。

这是给我带来问题的代码：

<div data-role="page">
    <div data-role="header">
        <h1>Hello World!</h1>
        <a href="#popupLogin" data-rel="popup" data-position-to="window">Open Popup</a>
    </div>
</div>

<div data-role="popup" id="popupLogin" data-theme="b" class="ui-popup-container ui-selectmenu-hidden popups" data-overlay-theme="a">
    <form id="loginForm">
        <input type="text" placeholder="Username..." />
        <input type="text" placeholder="Password..." />
        <input type="button" value="Login" data-theme="b" />
        <p>New to The Social Network?</p>
        <input type="button" value="Register here" />
    </form>
</div>

我们将不胜感激。很可能我在某个地方犯了一个愚蠢的错误，但我一辈子都找不到它。

【问题讨论】：

标签： javascript jquery html jquery-mobile

【解决方案1】：

如果弹出窗口只能从这一页访问。将 data-role="page" div 中的弹出 div 移动到与 header/content/footer 相同的级别。

如果您想从多个页面访问登录表单，请保持标记不变，但在文档上添加脚本以初始化小部件并增强内容：

$(function(){
    $( "#popupLogin" ).enhanceWithin().popup();
});

DEMO

【讨论】：