Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Dialog: Added info and example for option corners.

  • Loading branch information...
commit 7caa974e78397702fa9d6c389a169ce8c0508fba 1 parent c7cd508
Jasper de Groot jaspermdegroot authored
Showing with 34 additions and 0 deletions.
  1. +31 −0 docs/pages/dialog-corners.html
  2. +3 −0  docs/pages/dialog/index.html
31 docs/pages/dialog-corners.html
View
@@ -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-corners="false">
+ <div data-role="header">
+ <h1>Dialog</h1>
+ </div>
+
+ <div data-role="content">
+ <h1>No rounded corners</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>
3  docs/pages/dialog/index.html
View
@@ -82,6 +82,9 @@
<p>Dialogs can be styled with different theme swatches, just like any page by adding <code>data-theme</code> attributes to the header, content, or footer containers. Here is an example of a different dialog design:</p>
<a href="../dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
+ <p>By default dialogs have rounded corners. The option <code>corners</code> can be set to <code>false</code> by adding <code>data-corners="false"</code> to the dialog container:</p>
+ <a href="../dialog-corners.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">No rounded corners</a>
+
<p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch "e":</p>
<a href="../dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>
Please sign in to comment.
Something went wrong with that request. Please try again.