登陆页面作为Jquery Mobile中的对话框

时间:2011-11-01 18:41:36

标签: css jquery-mobile

我希望我的项目的登录页面像Jquery Mobile对话框一样。

当您点击退出网站时,此功能与Groupon的位置选择类似。

我该怎么做?我尝试复制渲染对话框页面的各个部分,但这会使内容在其他方面消失或表现得很奇怪。

1 个答案:

答案 0 :(得分:1)

这样的事情有用吗?

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>