Browse files

Dialog: Added info and example for option corners.

  • Loading branch information...
jaspermdegroot committed Dec 4, 2012
1 parent c7cd508 commit 7caa974e78397702fa9d6c389a169ce8c0508fba
Showing with 34 additions and 0 deletions.
  1. +31 −0 docs/pages/dialog-corners.html
  2. +3 −0 docs/pages/dialog/index.html
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<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/" />
<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>
<div data-role="page" data-corners="false">
<div data-role="header">
<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>
@@ -82,6 +82,9 @@ <h2>Styling &amp; theming</h2>
<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>

0 comments on commit 7caa974

Please sign in to comment.