jquery-mobile/docs/pages/docs-dialogs.html

<!DOCTYPE html> 
<html> 
	<head> 
	<title>jQuery Mobile Docs - Pages</title> 
	<link rel="stylesheet" media="only all" href="../../css/all" /> 
	<script type="text/javascript" src="../../js/all"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Dialogs</h1>
	</div><!-- /header -->

	<div data-role="content" class="ui-body">
			
			<p>Any page can be presented as a dialog by adding the </a>data-rel="dialog"</code> attribute to the page you're linking to. The framework will add styles to make the page look like a modal dialog by adding rounded corners and margins around the page along with a dark background behind the "dialog".</p>
			
			<p>The dialog will still open with the standard slide transition so to make it feel more dialog-like, we recommend adding a transition of pop, slideup or flip on the link too.</p>
			
<pre><code>
&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot; data-transition=&quot;pop&quot;&gt;Open dialog&lt;/a&gt;
</pre></code>
			
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog: pop</a>
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slideup">Open dialog: slideup</a>
			<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">Open dialog: flip</a>

	

			
			
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
new pages & links docs pages 2010-10-11 21:35:29 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
more docs edits for pages section 2010-10-11 21:49:12 +00:00			`<title>jQuery Mobile Docs - Pages</title>`
fixed paths to js and css files when these files are opened standalone 2010-10-11 23:44:14 +00:00			`<link rel="stylesheet" media="only all" href="../../css/all" />`
			`<script type="text/javascript" src="../../js/all"></script>`
new pages & links docs pages 2010-10-11 21:35:29 +00:00			`</head>`
			`<body>`

			`<div data-role="page">`

			`<div data-role="header">`
more docs edits for pages section 2010-10-11 21:49:12 +00:00			`<h1>Dialogs</h1>`
new pages & links docs pages 2010-10-11 21:35:29 +00:00			`</div><!-- /header -->`

			`<div data-role="content" class="ui-body">`

			`<p>Any page can be presented as a dialog by adding the </a>data-rel="dialog"</code> attribute to the page you're linking to. The framework will add styles to make the page look like a modal dialog by adding rounded corners and margins around the page along with a dark background behind the "dialog".</p>`

			`<p>The dialog will still open with the standard slide transition so to make it feel more dialog-like, we recommend adding a transition of pop, slideup or flip on the link too.</p>`

			`<pre><code>`
			`<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>`
			`</pre></code>`

			`<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog: pop</a>`
			`<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slideup">Open dialog: slideup</a>`
			`<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">Open dialog: flip</a>`





			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`