Creating Dialog Box in jQuery Mobile

by jquerybyexample

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<div data-role="page" id="Main">
    <div data-role="header">
        <h1>
            Welcome!!!!
        </h1>
    </div>
    <div data-role="content">
        <p>
            I'm main page. To open dialog box click <a href="#dialog" data-rel="dialog" data-transition="flip">me</a>
        </p>
       
    </div>
    <div data-role="footer">
        <h4>
            jQuery By Example
        </h4>
    </div>
</div>
  <!-- Start of second page -->
<div data-role="page" id="dialog">
    <div data-role="header">
        <h1>
            Welcome!!!!
        </h1>
    </div>
    <div data-role="content">
        <p>
            I'm new page but opened up as dialog. 
        </p>
        <p>
            <a href="#Main">Back to Main</a>
        </p>
    </div>
    <div data-role="footer">
        <h4>jQuery By Example
        </h4>
    </div>
</div>