1 files changed, 113 insertions, 0 deletions
diff --git a/demos/dialog/modal-form2.html b/demos/dialog/modal-form2.html
new file mode 100644
index 000000000..509150858
--- /dev/null
+++ b/demos/dialog/modal-form2.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Dialog - Modal form</title>
+	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.3.1.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" src="../../external/bgiframe/jquery.bgiframe.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<style type="text/css">
+		label, input { display:block; }
+		input.text { margin-bottom:12px; width:95%; }
+		fieldset { padding:0; border:0; margin-top:25px; }
+	</style>
+	<script type="text/javascript">
+	$(function() {
+		var name = $('#name'),
+			email = $('#email'),
+			password = $('#password'),
+			allFields = $([]).add(name).add(email).add(password);
+		
+		$("#dialog").dialog({
+			autoOpen: false,
+			bgiframe: true,
+			height: 300,
+			modal: true,
+			buttons: {
+				'Create user account': function() {
+					var bValid = true;
+					allFields
+						.removeClass('ui-state-error')
+						.each(function() {
+							if (!$(this).val().length) {
+								$(this).addClass('ui-state-error');
+								bValid = false;
+							}
+						});
+					
+					if (bValid) {
+						$('#users tbody').append('<tr>' +
+							'<td>' + name.val() + '</td>' + 
+							'<td>' + email.val() + '</td>' + 
+							'<td>' + password.val() + '</td>' +
+							'</tr>'); 
+						$(this).dialog('close');
+					}
+				},
+				Cancel: function() {
+					$(this).dialog('close');
+				}
+			},
+			close: function() {
+				allFields.val('');
+			}
+		});
+		
+		$('#create-user').click(function() {
+			$('#dialog').dialog('open');
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="dialog" title="Create new user">
+	<p>All form fields are required.</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="email" value="" class="text" />
+		<label for="password">Password</label>
+		<input type="password" name="password" id="password" value="" class="text" />
+	</fieldset>
+	</form>
+</div>
+
+<a id="create-user" href="#">create new user</a>
+
+<table id="users">
+	<thead>
+		<tr>
+			<th>Name</th>
+			<th>Email</th>
+			<th>Password</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>John Doe</td>
+			<td>john.doe@example.com</td>
+			<td>johndoe1</td>
+		</tr>
+	</tbody>
+</table>
+
+</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 -->
+
+</body>
+</html>