Целевая страница как диалог в 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>