diff --git a/demos/dialog/buttons.html b/demos/dialog/buttons.html deleted file mode 100644 index 309f2e835..000000000 --- a/demos/dialog/buttons.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - jQuery UI Dialog - Buttons Demo - - - - - - - - - - - -
-

Sed vel diam id libero rutrum convallis. 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.

-
- - - diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 828aae916..35fc392f2 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -17,8 +17,9 @@ -
-

Sed vel diam id libero rutrum convallis. 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.

+
+

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: 

$("#dialog").dialog();

+

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.

diff --git a/demos/dialog/index.html b/demos/dialog/index.html index 5880f315b..eb455ea5b 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -8,9 +8,11 @@
Dialog
-
Default
-
Buttons
-
Modal
+
Basic dialog (default)
+
Modal dialog
+
Modal message
+
Modal confirmation
+
Modal form
diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index ef97aa02f..f4e573305 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -23,11 +23,12 @@ -
-

Sed vel diam id libero rutrum convallis. 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.

+
+

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.

The dialog window can be moved, resized and closed with the 'x' icon.

-
+ +

Sed vel diam id libero rutrum convallis. 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.

Sed vel diam id libero rutrum convallis. 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.

Sed vel diam id libero rutrum convallis. 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.

@@ -37,9 +38,10 @@ radio

+


+ diff --git a/demos/dialog/modal_confirmation.html b/demos/dialog/modal_confirmation.html new file mode 100644 index 000000000..1f5829866 --- /dev/null +++ b/demos/dialog/modal_confirmation.html @@ -0,0 +1,56 @@ + + + + jQuery UI Dialog - Buttons Demo + + + + + + + + + + + +
+

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.

+ + + +
+

Sed vel diam id libero rutrum convallis. 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.

+

Sed vel diam id libero rutrum convallis. 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.

+

Sed vel diam id libero rutrum convallis. 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.

+
+
+ checkbox
+ radio
+

+
+
+
+ + + diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html new file mode 100644 index 000000000..c30eac6bb --- /dev/null +++ b/demos/dialog/modal_form.html @@ -0,0 +1,77 @@ + + + + jQuery UI Dialog - Buttons Demo + + + + + + + + + + + + + + + +
+

Example of a form placed inside a dialog.

+ +
+
+ + + + + + +
+
+
+ + + + +
+

Sed vel diam id libero rutrum convallis. 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.

+

Sed vel diam id libero rutrum convallis. 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.

+

Sed vel diam id libero rutrum convallis. 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.

+
+
+ checkbox
+ radio
+

+
+
+
+ + diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html new file mode 100644 index 000000000..d3f5b4922 --- /dev/null +++ b/demos/dialog/modal_message.html @@ -0,0 +1,54 @@ + + + + jQuery UI Dialog - Buttons Demo + + + + + + + + + + + +
+

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.

This example adds a button bar with a single 'ok' button to dismiss the dialog.

+
+ + + + +
+

Sed vel diam id libero rutrum convallis. 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.

+

Sed vel diam id libero rutrum convallis. 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.

+

Sed vel diam id libero rutrum convallis. 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.

+
+
+ checkbox
+ radio
+

+
+
+
+ + +