来自 JS 的 jQuery 移动弹出式调用答案

【问题标题】：jQuery mobile popup call from JS来自 JS 的 jQuery 移动弹出式调用
【发布时间】：2012-10-23 21:12:56
【问题描述】：

我已经定义了弹出 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");

它们都不起作用。任何建议。

【问题讨论】：

需要查看应该调用弹出窗口的标记，通常是通过 href ，但应该可以使用 $.mobile.changePage，但如果没有那个标记/脚本，我会随风飘扬
我想在表单提交等验证中显示弹出消息

标签： jquery mobile popup

【解决方案1】：

前几天我正在这样做，这对我来说就是这样。代码在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>

【讨论】：

【解决方案2】：

这个问题是answered here

$(document).on({
    "pageinit": function () {
        alert("pageinit");
        //$("#popupBasic").popup('open'); will throw error here because the page is not ready yet
        //simulate ajax call here
        //data recieved from ajax - might be an array, anything
        var a = Math.random();
        //use this to transfer data betwene events
        $(this).data("fromAjax", a);
    },
    //open popup here
    "pageshow": function () {
        alert("pageshow");
        //using stored data in popup
        $("#popupBasic p").html("Random : " + $(this).data("fromAjax"));
        //open popup
        $("#popupBasic").popup('open');
    }
}, "#page1");

http://jsfiddle.net/hungerpain/MvwBU/

【讨论】：