Skip to content
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">
<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; }
<script type="text/javascript">
$(function() {
var name = $('#name'),
email = $('#email'),
password = $('#password'),
allFields = $([]).add(name).add(email).add(password);

autoOpen: false,
bgiframe: true,
height: 300,
modal: true,
buttons: {
'Create user account': function() {
var bValid = true;
.each(function() {
if (!$(this).val().length) {
bValid = false;

if (bValid) {
$('#users tbody').append('<tr>' +
'<td>' + name.val() + '</td>' +
'<td>' + email.val() + '</td>' +
'<td>' + password.val() + '</td>' +
Cancel: function() {
close: function() {

$('#create-user').click(function() {

<div class="demo">

<div id="dialog" title="Create new user">
<p>All form fields are required.</p>

<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" />

<a id="create-user" href="#">create new user</a>

<table id="users">
<td>John Doe</td>

</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 -->


0 comments on commit b0f7179

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