css - 登录页面作为 Jquery Mobile 中的对话框

Question

我想让我的元素的登陆页面表现得像一个 Jquery Mobile 对话框。

当您点击站点注销时，这与 Groupon 的位置选择功能类似。

我该怎么做？我尝试复制呈现的对话框页面的各个部分，但这会使内容消失或以其他方式表现得很奇怪。

Answer 1

这样的东西有用吗？

• http://jsfiddle.net/WMvAs/17/
• http://jsfiddle.net/WMvAs/18/ (功能)

JS

var showInitialDialog = false;

if (showInitialDialog === false) {
    $.mobile.changePage('#landing', 'pop', false, true);
    showInitialDialog = true;
}

$('#home').live('pageshow', function(event, ui) {
    if (showInitialDialog === false) {
        $.mobile.changePage('#landing', 'pop', false, true);
        showInitialDialog = true;
    }
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Home Page</li>
            <li><a href="#page2">Page 2</a></li>
        </ul>

    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Page 2</li>
            <li><a href="#home">Home Page</a></li>
        </ul>

    </div>
</div>

<div data-role="dialog" id="landing">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Landing Dialog</li>
            <li><a href="#home">Go Home</a></li>
        </ul>

    </div>
</div>