Skip to content
Permalink
Browse files

Dialog Demo: Beginning of new modal form demo.

  • Loading branch information
scottgonzalez committed Jan 29, 2009
1 parent 9592848 commit b0f7179462822a0d73e4a9075b675950dd36ed17
Showing with 113 additions and 0 deletions.
  1. +113 −0 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>

0 comments on commit b0f7179

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