Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Dialog: Added info and demo of option closeBtn to the docs.

  • Loading branch information...
commit db4a2ea935babb1bd4aa99f5cd9e5254ef2719ce 1 parent 6fd28f9
@jaspermdegroot jaspermdegroot authored
View
31 docs/pages/dialog-noclosebtn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" data-close-btn="none">
+ <div data-role="header">
+ <h1>Dialog</h1>
+ </div>
+
+ <div data-role="content">
+ <h1>No close button</h1>
+ <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
+ <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>
+ </div>
+ </div>
+
+
+</body>
+</html>
View
31 docs/pages/dialog-rightclosebtn.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Framework - Dialog Example</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+<div data-role="page" data-close-btn="right">
+ <div data-role="header">
+ <h1>Dialog</h1>
+ </div>
+
+ <div data-role="content">
+ <h1>Right close button</h1>
+ <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
+ <a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Ok, I get it</a>
+ </div>
+ </div>
+
+
+</body>
+</html>
View
7 docs/pages/dialog/index.html
@@ -35,7 +35,7 @@
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
- <p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. If the dialog has a header the framework will also add a close button at the left side of the header.</p>
+ <p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. By default the framework will also add a close button if the dialog has a header.</p>
<p>
<code>
@@ -63,6 +63,11 @@
<h2>Closing dialogs</h2>
<p>When any link is clicked within a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. Nevertheless, dialogs can also be chained, as explained below under <strong>"Chaining Dialogs"</strong>. Similarly, a link that opens a popup will also leave the dialog in place.</p>
+
+ <p>If the dialog has a header the framework will add a close button at the left side of the header. You can change the position by adding <code>data-close-btn="right"</code> to the dialog container. If you don't want a close button in the header or add a custom close button, you can use <code>data-close-btn="none"</code>.</p>
+ <a href="../dialog-rightclosebtn.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Right close button</a>
+ <a href="../dialog-noclosebtn.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">No close button</a>
+
<p>To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the <code>data-rel="back"</code> attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.</p>
<p>For JavaScript-generated links, you can simply set the href attribute to "#" and use the <code>data-rel="back"</code> attribute. You can also call the dialog's <code>close()</code> method to programmatically close dialogs, for example: <code>$('.ui-dialog').dialog('close')</code>. </p>
Please sign in to comment.
Something went wrong with that request. Please try again.