来自 JS 的 jQuery 移动弹出调用

标签 jquery mobile popup

我已经定义了弹出 div,我想在某些事件上打开,而不是使用 href。我定义了弹出 div,如下所示:

<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">        
        <div data-role="header" data-theme="a" class="ui-corner-top">
            <h1>Sample Page</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">                
            <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">OK</a>    
        </div>
    </div>

我尝试调用这个弹出 div

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

没有一个不工作。任何建议。

最佳答案

前几天我正在这样做,这就是它对我的作用。代码位于jsFiddle so you can check it out这也是一致性问题的代码。另外,您可能需要确保引用 newest 1.2 version .

此 js 代码位于 </head> 之前标签:

$(document).ready(function(){
    $( "#popupLogin" ).popup( "open" );            
});​

html:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>    
    <section id="home" data-role="page">
        <header data-role="header">
            <h1>test page</h1>
        </header>

        <div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
            <h3 class="centerText">Register free!</h3>
            <div class="popup">
                <form>                
                      <input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
                      <button type="submit" data-theme="b">Sign me up</button>

                      <p class="centerText">
                          text1<br/>
                          text2<br/>
                          etc...<br/>
                      </p>                
                </form>
            </div>
        </div>        
    </section>
    </body>
</html>

关于来自 JS 的 jQuery 移动弹出调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13039332/

相关文章:

jQuery 加载不更新 Internet Explorer 中的文档

javascript - 如何删除/重置window.onfocus功能?

html - 响应式网站无法在移动设备上运行

ios - 移动应用程序与网络应用程序 - Apple 不再接受网络应用程序?

testing - Mac 上 Katalon Studio 中 Appium 目录的正确设置是什么?

javascript - Firefox 弹出窗口锁定父窗口直到它关闭

javascript - 如何使用放大弹出窗口根据选择显示表单提交的结果

javascript - 更改子元素的样式以在悬停父页面元素 36 次时显示唯一的 div

java - 如何检测鼠标(指针)何时位于 JList 中的文本上?

javascript - 使用Javascript在新窗口中弹出图像