Skip to content
Permalink
Browse files

demos/dialog: markup tweaks

  • Loading branch information
rdworth committed Dec 31, 2008
1 parent 1149c52 commit c067e99bb9fbc91c3815aeb38cda485c20714493
Showing with 28 additions and 23 deletions.
  1. +10 −9 demos/dialog/modal_confirmation.html
  2. +18 −14 demos/dialog/modal_message.html
@@ -35,12 +35,12 @@

<div class="demo">

<div id="dialog" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<div id="dialog" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
<input value="text input" /><br />
@@ -56,14 +56,15 @@

</div><!-- End demo -->



<div class="demo-description">

<p>This type of dialog adds a button bar and is useful for confirming an action that may be destructive or important. These are typically displayed as modal dialogs to get the user's attention and force a decision before continuing. This example uses the an icon from the css sprite set and is set to be not resizable by setting this option to false.</p>
<p>
This type of dialog adds a button bar and is useful for confirming an action that may be destructive or important.
These are typically displayed as modal dialogs to get the user's attention and force a decision before continuing.
This example uses an icon from the css sprite set and is set to be not resizable by setting the resizable option to false.
</p>

</div><!-- End demo-description -->


</body>
</html>
@@ -28,20 +28,20 @@
</head>
<body>

<div id="dialog" title="Download complete">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Your files have downloaded successfully into the My Downloads folder.</p>
<p>Currently using <b>36% of your storage space</b>.</p>
</div>


<div class="demo">

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p>
</div>
<div id="dialog" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
<input value="text input" /><br />
@@ -57,11 +57,15 @@

</div><!-- End demo -->



<div class="demo-description">

<p>A modal message dialog like this is useful for providing information to the user that requires them to explicitly acknowledge before continuing with their work. </p><p>This example adds a button bar with a single 'Ok' button to dismiss the dialog.</p>
<p>
A modal message dialog like this is useful for providing information to the user that requires them to explicitly acknowledge before continuing with their work.
</p>

<p>
This example adds a button bar with a single 'Ok' button to dismiss the dialog.
</p>

</div><!-- End demo-description -->

0 comments on commit c067e99

Please sign in to comment.
You can’t perform that action at this time.