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="slidedown">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="content">
        <p>
            I'm new page but opened up as dialog. 
        </p>
        <p>
            Click Cancel button in footer to close me.
        </p>
    </div>
    <div data-role="footer">
        <h3><a href="#" data-rel="back" data-role="button">Close</a></h3>
    </div>
</div>