Have created a mulipage template in jquery mobile with a dialog page also.The requirement is when we click on one of the icons it should display the dialog box but the problem is all the pages and the dialog are visible in the same page allthe time without any events fired. please tell me if i am missing anything.
the code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Dialog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.3.1.min.js"></script>
<script></script>
</head>
<body>
<div data-role="page" id="one">
<div data-role="content" align="bottom">
<p>
<a href="#dialog" data-rel="dialog" data-transition="pop">click for dialog</a>
</p>
</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header" data-theme="e">
<h1>dialog.</h1>
</div>
<div data-role="header" data-theme="d">
<h1>This is dialog.</h1>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="two">
<div data-role="header" data-theme="e">
<h1>page2</h1>
</div>
<div data-role="header" data-theme="d">
<h1>This is page2.</h1>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>