<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="Http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.CSS"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="content"> <p>Welcome!</p> <a href="#pagetwo" data-rel="dialog">Go to Page Two</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>I'm A Dialog Box!</h1> </div> <div data-role="content"> <p>The dialog box is different from a normal page, it is displayed on top of the current page with a dark background color. It will not span the entire width of the page. The dialog has an icon of "X" in the header to close the box.</p> <a href="#pageone">Go to Page One</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>