logo标签列表

JavaScript调用jQuery移动端弹窗

jquerymobilepopup
3

我已经定义了一个弹出层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实现，但如果没有这些标记/脚本，我将束手无策。 - Jay Rizzi
我想在某些验证（例如表单提交）时显示弹出消息。 - Sabarish
2个回答
4
我最近也在做这件事情，以下是我的操作步骤。代码已经放在jsFiddle 上，你可以查看一下。这里还有一个解决一致性问题的代码。同时，请确保你正在引用最新的1.2版本。
这个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>
0

这个问题已经在这里得到了回答。

$(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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接