jQuery Mobile - Dialog

jQuery Mobile - Dialog

by Nirvanachain

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
<div data-role="page" id="foo">
    <div data-role="header">
        <h1>
            Foo
        </h1>
    </div><!-- /header -->
    <div data-role="content">
        <p>
            I'm first in the source order so I'm shown as the page.
        </p>
        <p>
            View internal page called <a href="#bar" data-rel="dialog">bar</a>
        </p>
    </div><!-- /content -->
    <div data-role="footer">
        <h4>
            Page Footer
        </h4>
    </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
        <h1>
            Bar
        </h1>
    </div><!-- /header -->
    <div data-role="content">
        <p>
            I'm second in the source order so I'm not shown as the page initally.
        </p>
        <p>
            <a href="#foo">Back to foo</a>
        </p>
    </div><!-- /content -->
    <div data-role="footer">
        <h4>
            Page Footer
        </h4>
    </div><!-- /footer -->
</div><!-- /page -->