Skip to content
Permalink
Browse files

Re-vamped set of dialog examples that shows the standard set of dialo…

…g types. Removed button.html because it was expanded into the 3 modal types.
  • Loading branch information
Todd Parker
Todd Parker committed Dec 29, 2008
1 parent 622f34a commit 9f91a25ca3945be7f06947b1a3eafc19eb8195de

This file was deleted.

@@ -17,8 +17,9 @@
</head>
<body>

<div id="dialog" title="Curabitur augue">
<p>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.</p>
<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>

</body>
@@ -8,9 +8,11 @@

<dl class="nav">
<dt>Dialog</dt>
<dd><a href="default.html">Default</a></dd>
<dd><a href="buttons.html">Buttons</a></dd>
<dd><a href="modal.html">Modal</a></dd>
<dd><a href="default.html">Basic dialog (default)</a></dd>
<dd><a href="modal.html">Modal dialog</a></dd>
<dd><a href="modal_message.html">Modal message</a></dd>
<dd><a href="modal_confirmation.html">Modal confirmation</a></dd>
<dd><a href="modal_form.html">Modal form</a></dd>
</dl>

</body>
@@ -23,11 +23,12 @@
</head>
<body>

<div id="dialog" title="Curabitur augue">
<p>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.</p>
<div id="dialog" title="Basic modal dialog">
<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>
</div>

<div>
<!-- Sample page content to illustrate the semi-transparent overlay screen -->
<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>
@@ -37,9 +38,10 @@
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br />
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div>

</body>
</html>
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Buttons Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Delete this file': function() {
alert('The user was deleted forever!');
},
Cancel: function() {
alert('You clicked Cancel. The dialog will now close.');
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>

<div id="dialog" title="Modal confirmation dialog">
<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>


<!-- Sample page content to illustrate the semi-transparent overlay screen -->
<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>

</body>
</html>
@@ -0,0 +1,77 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Buttons Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
height: '300',
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Create user account': function() {
alert('The user was created!');
},
Cancel: function() {
alert('You clicked Cancel. The dialog will now close.');
$(this).dialog('close');
}
}
});
});
</script>

<!-- Styles for this demo page -->
<style type="text/css" media="screen">
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; }
fieldset { padding:0; border:0; margin-top:25px; }
</style>

</head>
<body>

<div id="dialog" title="Modal confirmation dialog">
<p>Example of a form placed inside a dialog.</p>

<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text" />
<label for="email">Email</label>
<input type="text" name="email" id="birthday" value="" class="text" />
<label for="password">Password</label>
<input type="password" name="password" id="birthday" value="" class="text" />
</fieldset>
</form>
</div>



<!-- Sample page content to illustrate the semi-transparent overlay screen -->
<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>
</body>
</html>
@@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Buttons Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Ok: function() {
alert('You clicked Ok!');
}
}
});
});
</script>
</head>
<body>

<div id="dialog" title="Modal message dialog">
<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>



<!-- Sample page content to illustrate the semi-transparent overlay screen -->
<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>

</body>
</html>

0 comments on commit 9f91a25

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