aboutsummaryrefslogtreecommitdiffstats
path: root/demos/dialog
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
committerScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
commit303f20e1b3c977d75047bed1a3533a180d73fab5 (patch)
treec8cf97b57f2493313dfd92c1dfceedb29d137d67 /demos/dialog
parent9e259c6e5369bf272dd14df7aea1372c5b064300 (diff)
downloadjquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz
jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip
Demos: Cleanup.
Diffstat (limited to 'demos/dialog')
-rw-r--r--demos/dialog/animated.html11
-rw-r--r--demos/dialog/default.html25
-rw-r--r--demos/dialog/index.html22
-rw-r--r--demos/dialog/modal-confirmation.html28
-rw-r--r--demos/dialog/modal-form.html16
-rw-r--r--demos/dialog/modal-message.html28
-rw-r--r--demos/dialog/modal.html28
7 files changed, 25 insertions, 133 deletions
diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html
index a4b85bbc5..69976261a 100644
--- a/demos/dialog/animated.html
+++ b/demos/dialog/animated.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -36,21 +36,14 @@
</head>
<body>
-<div class="demo">
-
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/dialog/default.html b/demos/dialog/default.html
index 1f321790d..37c72540c 100644
--- a/demos/dialog/default.html
+++ b/demos/dialog/default.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -22,33 +22,12 @@
</head>
<body>
-<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>
-</div><!-- End sample page content -->
-
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/dialog/index.html b/demos/dialog/index.html
index 460e4fb36..6aaa3ecb5 100644
--- a/demos/dialog/index.html
+++ b/demos/dialog/index.html
@@ -1,23 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog Demos</title>
- <link rel="stylesheet" href="../demos.css">
</head>
<body>
-<div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="animated.html">Animated dialog</a></li>
- <li><a href="modal.html">Modal dialog</a></li>
- <li><a href="modal-message.html">Modal message</a></li>
- <li><a href="modal-confirmation.html">Modal confirmation</a></li>
- <li><a href="modal-form.html">Modal form</a></li>
- </ul>
-</div>
+<ul>
+ <li><a href="default.html">Default functionality</a></li>
+ <li><a href="animated.html">Animated dialog</a></li>
+ <li><a href="modal.html">Modal dialog</a></li>
+ <li><a href="modal-message.html">Modal message</a></li>
+ <li><a href="modal-confirmation.html">Modal confirmation</a></li>
+ <li><a href="modal-form.html">Modal form</a></li>
+</ul>
</body>
</html>
diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html
index 6bdb9ba89..ff18620b0 100644
--- a/demos/dialog/modal-confirmation.html
+++ b/demos/dialog/modal-confirmation.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -16,9 +16,6 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
- // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
- $( "#dialog:ui-dialog" ).dialog( "destroy" );
-
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
@@ -37,33 +34,14 @@
</head>
<body>
-<div class="demo">
-
<div id="dialog-confirm" 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>
-</div><!-- End sample page content -->
-
-</div><!-- End demo -->
-
-
+<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 class="demo-description">
<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html
index d1b7ccfa6..4cfdd6fe0 100644
--- a/demos/dialog/modal-form.html
+++ b/demos/dialog/modal-form.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -30,9 +30,6 @@
</style>
<script>
$(function() {
- // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
- $( "#dialog:ui-dialog" ).dialog( "destroy" );
-
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
@@ -68,7 +65,7 @@
return true;
}
}
-
+
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
@@ -116,8 +113,6 @@
</head>
<body>
-<div class="demo">
-
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
@@ -155,13 +150,8 @@
</div>
<button id="create-user">Create new user</button>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html
index 9de7d3881..8e69db8e8 100644
--- a/demos/dialog/modal-message.html
+++ b/demos/dialog/modal-message.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -17,9 +17,6 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
- // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
- $( "#dialog:ui-dialog" ).dialog( "destroy" );
-
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
@@ -33,8 +30,6 @@
</head>
<body>
-<div class="demo">
-
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
@@ -45,27 +40,10 @@
</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>
-</div><!-- End sample page content -->
-
-</div><!-- End demo -->
-
-
+<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 class="demo-description">
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html
index 2ea65c1f7..b4de8e9b9 100644
--- a/demos/dialog/modal.html
+++ b/demos/dialog/modal.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -16,9 +16,6 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
- // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
- $( "#dialog:ui-dialog" ).dialog( "destroy" );
-
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
@@ -28,33 +25,14 @@
</head>
<body>
-<div class="demo">
-
<div id="dialog-modal" 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>
-</div><!-- End sample page content -->
-
-</div><!-- End demo -->
-
-
+<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 class="demo-description">
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-09 11:54:44 +0000