library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

demos/dialog: markup tweaks

Browse Source
This commit is contained in:
Richard Worth 2008-12-31 06:41:28 +00:00
parent 1149c52bb4
commit c067e99bb9
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
demos/dialog/modal_confirmation.html
View File

@ -35,12 +35,12 @@
<div class="demo">
<div id="dialog" title="Empty the recycle bin?">
<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>
<!-- 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>

32
demos/dialog/modal_message.html
View File

@ -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 -->