Question

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

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

我尝试从ui-selectmenu-hidden删除div类，但是一旦页面加载，就会在没有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>

这里的任何帮助将不胜感激。我可能在某个地方犯了一个愚蠢的错误，但对于我的生活，我找不到它。

Answer 1

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

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

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

<强> DEMO

从标题链接到jQuery移动弹出窗口时不显示

1 个答案: