Question

我已经定义了popup div，我想在某个事件上打开，而不是使用href。我已经定义了popup 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");

他们都没有工作。任何建议。

Answer 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>

Answer 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/

来自JS的jQuery移动弹出调用

2 个答案: