</head>
<body>
-<div id="dialog" title="Basic dialog">
- <p>This is the default dialog which is useful for displaying information. It is created by simply calling .dialog on the ID of the content like this: <pre>$("#dialog").dialog();</pre></p>
- <p>If the content exceeds the size of the window, a scrollbar will automatically appear. The dialog window can be moved, resized and closed with the 'x' icon by default. </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>
+
+ <!-- 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 />
+ <input type="checkbox" />checkbox<br />
+ <input type="radio" />radio<br />
+ <select>
+ <option>select</option>
+ </select><br /><br />
+ <textarea>textarea</textarea><br />
+ </form>
+ <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>
+</div><!-- End sample page content -->
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>This is a default dialog which opens in a floating layer above the page content protected with an iframe. It is created by simply calling .dialog on the ID of the content like this: <pre>$("#dialog").dialog();</pre></p>
+<p>A basic dialog window has a title bar and a content area. If the content length exceeds the size of the window, a scrollbar will automatically appear. The dialog window can be moved, resized and closed with the 'x' icon by default. </p>
+
+</div><!-- End demo-description -->
+
</body>
</html>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>\r
<script type="text/javascript">\r
$(function() {\r
- $("#dialog").dialog({
+ $("#dialog").dialog({\r
+ height:140,
modal: true,
overlay: {
backgroundColor: '#000',
</head>\r
<body>\r
\r
-<div id="dialog" title="Basic modal dialog">\r
- <p>This is identical to the default dialog except a semi-transparent overlay layer is added as an option to make this look modal to the page content.</p><p>The dialog window can be moved, resized and closed with the 'x' icon.</p>\r
-</div>\r
-
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->\r
-<div 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>
-<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>
-<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 />
- <input type="checkbox" />checkbox<br />
- <input type="radio" />radio<br />
- <select>
- <option>select</option>
- </select><br /><br />
- <textarea>textarea</textarea><br />
-</form>
-</div>\r
+
+<div class="demo">
+
+ <div id="dialog" title="Basic modal dialog">
+ <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
+ </div>
+
+ <!-- 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 />
+ <input type="checkbox" />checkbox<br />
+ <input type="radio" />radio<br />
+ <select>
+ <option>select</option>
+ </select><br /><br />
+ <textarea>textarea</textarea><br />
+ </form>
+ <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>
+</div><!-- End sample page content -->
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>This is identical to the default dialog except a semi-transparent overlay layer is added as an option to make this look more modal and dim out the page content behind it to bring the user's attention to the dialog.</p><p>The dialog window can be moved, resized and closed with the 'x' icon.</p>
+
+</div><!-- End demo-description -->
+\r
\r
</body>\r
</html>\r
<!doctype html>\r
<html lang="en">\r
<head>\r
- <title>jQuery UI Dialog - Buttons Demo</title>\r
+ <title>jQuery UI Dialog - Modal Confirmation Demo</title>\r
<link type="text/css" href="../demos.css" rel="stylesheet" />\r
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
<script type="text/javascript">\r
$(function() {\r
$("#dialog").dialog({
+ resizable:false,
+ height:140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
- 'Delete this file': function() {
- alert('The user was deleted forever!');
+ 'Delete all items in recycle bin': function() {
+ alert('The items were deleted forever!');
},
Cancel: function() {
alert('You clicked Cancel. The dialog will now close.');
</script>\r
</head>\r
<body>\r
-\r
-<div id="dialog" title="Modal confirmation dialog">\r
- <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.</p></div>\r
-\r
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->\r
-<div 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>
-<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>
-<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 />
- <input type="checkbox" />checkbox<br />
- <input type="radio" />radio<br />
- <select>
- <option>select</option>
- </select><br /><br />
- <textarea>textarea</textarea><br />
-</form>
-</div>\r
+<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>
+
+ <!-- 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 />
+ <input type="checkbox" />checkbox<br />
+ <input type="radio" />radio<br />
+ <select>
+ <option>select</option>
+ </select><br /><br />
+ <textarea>textarea</textarea><br />
+ </form>
+ <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>
+</div><!-- End sample page content -->
+
+</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>
+
+</div><!-- End demo-description -->
+\r
\r
</body>\r
</html>\r
<!doctype html>\r
<html lang="en">\r
<head>\r
- <title>jQuery UI Dialog - Buttons Demo</title>\r
+ <title>jQuery UI Dialog - Modal Form Demo</title>\r
<link type="text/css" href="../demos.css" rel="stylesheet" />\r
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
</head>\r
<body>\r
\r
-<div id="dialog" title="Modal confirmation dialog">\r
- <p>Example of a form placed inside a dialog.</p>\r
+\r
+\r
+\r
+<div class="demo">
+
+<div id="dialog" title="Create new user">\r
+ <p>All form fields are required.</p>\r
\r
<form>\r
<fieldset>
<input type="password" name="password" id="password" value="" class="text" />
</fieldset>
</form>\r
-</div>\r
-\r
-\r
+</div>
+
+ <!-- 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 />
+ <input type="checkbox" />checkbox<br />
+ <input type="radio" />radio<br />
+ <select>
+ <option>select</option>
+ </select><br /><br />
+ <textarea>textarea</textarea><br />
+ </form>
+ <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>
+</div><!-- End sample page content -->
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->\r
-<div 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>
-<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>
-<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 />
- <input type="checkbox" />checkbox<br />
- <input type="radio" />radio<br />
- <select>
- <option>select</option>
- </select><br /><br />
- <textarea>textarea</textarea><br />
-</form>
-</div>\r
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>This is an example of how a dialog can be used for data entry by making it larger and embedding a form into the content area. A multi-step wizard could be created by extending this with a step navigation and forward and back buttons.</p>
+
+</div><!-- End demo-description -->
+\r
</body>\r
</html>\r
<!doctype html>\r
<html lang="en">\r
<head>\r
- <title>jQuery UI Dialog - Buttons Demo</title>\r
+ <title>jQuery UI Dialog - Modal Message Demo</title>\r
<link type="text/css" href="../demos.css" rel="stylesheet" />\r
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
</head>\r
<body>\r
\r
-<div id="dialog" title="Modal message dialog">\r
- <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>\r
+<div id="dialog" title="Download complete">\r
+ <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>\r
+ <p>Currently using <b>36% of your storage space</b>.</p>\r
</div>\r
\r
\r
+<div class="demo">
-<!-- Sample page content to illustrate the semi-transparent overlay screen -->\r
-<div 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>
-<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>
-<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 />
- <input type="checkbox" />checkbox<br />
- <input type="radio" />radio<br />
- <select>
- <option>select</option>
- </select><br /><br />
- <textarea>textarea</textarea><br />
-</form>
-</div>\r
+ <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>
+
+ <!-- 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 />
+ <input type="checkbox" />checkbox<br />
+ <input type="radio" />radio<br />
+ <select>
+ <option>select</option>
+ </select><br /><br />
+ <textarea>textarea</textarea><br />
+ </form>
+ <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>
+</div><!-- End sample page content -->
+
+</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>\r
+
+</div><!-- End demo-description -->
\r
</body>\r
</html>\r
projects / jquery-ui.git / commitdiff