jQuery Mobile，打开对话框

Question

我遇到了一个问题，无法使用jQuery Mobile的转场效果。

我无法创建转场效果。

以下是我的代码...

    <div id="main" data-role="content" data-theme="d">
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a>
<!-- ... -->
<div data-role="page" id="dialog"><!-- dialog-->
    <div data-role="header" data-theme="e">
        <h1>Foo</h1>
        </div>
    <div data-role="content" data-theme="e">
        <p>Bar</p>
    </div>
</div>
<!-- Footer -->
jQuery('#page').live('pageinit', function() {
    $('.widget ul').attr('data-inset', 'true').attr('data-theme', 'd').attr('data-dividertheme', 'b').attr('data-role', 'listview');
    $('.widget ul').listview();
});
jQuery('#page').live('changepage', function() {
$('#dialog', 'pop', true, true);
});

感谢您的帮助。 此致， V.

- Vincent

Answer 1

在data-role="page"元素上，您需要添加data-rel="dialog"而不是"id"，以使页面显示为对话框。 请参见此处：http://jquerymobile.com/test/docs/pages/page-dialogs.html

- adamdehaven

---

@adamheaven 谢谢Adam。我忘记了"data-rel='dialog'"！ :) - Vincent

没问题 :) 我刚刚自己完成了一个jquery移动站点。 - adamdehaven

Answer 2

jQuery(document).delegate('#page', 'pageinit', function() {
    $('.widget ul').attr('data-inset', 'true').attr('data-theme', 'd').attr('data-dividertheme', 'b').attr('data-role', 'listview').listview();
}).delegate('#page', 'changepage', function() {
    $.mobile.changePage('#dialog', {
        transition : 'pop',
        role       : 'dialog'//this means you don't have to declare `data-role="dialog"` on the page if you don't want to
    });
});

注意我将.listview()函数调用和第二个.delegate()函数调用链接在一起。我还将.live()更改为.delegate()，因为自jQuery 1.7以来，.live()已被弃用。要导航到页面，您可以使用$.mobile.changePage()：http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

- Jasper

---

再次感谢你，Jasper。你的专业知识仍然非常有价值，几天前你已经帮助了我很有用的建议。 - Vincent

有没有一种方法可以将这个对话框定位到您想要的位置？ - user2805663