1 files changed, 83 insertions, 0 deletions
diff --git a/demos/popup/default.html b/demos/popup/default.html
new file mode 100644
index 000000000..71b3c8dd2
--- /dev/null
+++ b/demos/popup/default.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>jQuery UI Popup - Default demo</title>
+	<link rel="stylesheet" href="../demos.css" />
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
+	<script src="../../jquery-1.5.1.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.popup.js"></script>
+	<script>
+	$(function() {
+		var selected = {
+			select: function( event, ui ) {
+				$( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
+				$(this).popup("close");
+			}
+		};
+
+		$("#login-form").popup()
+			.find(":submit").button().click(function(event) {
+				event.preventDefault();
+			});
+	});
+	</script>
+	<style type="text/css">
+		.ui-popup { position: absolute; z-index: 5000; }
+		.ui-menu { width: 200px; }
+		
+		/*
+		table {
+			border-collapse: collapse;
+		}
+		th, td {
+			padding: 0.5em;
+			border: 1px solid black;
+		}
+		*/
+
+		#login-form {
+			width: 16em; border: 1px solid gray; border-radius: 5px;
+			padding: 1em;
+			box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
+			background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
+			font-size: 1.3em; outline: none;
+		}
+		#login-form label { display: inline-block; width: 5em; }
+		#login-form .submit { margin-left: 5em; }
+ 	</style>
+</head>
+<body>
+
+<div class="demo">
+	<a href="#login-form">Log In</a>
+	<div id="login-form" class="ui-widget-content" tabIndex="0">
+		<form>
+			<div>
+				<label>Username</label>
+				<input type="username" />
+			</div>
+			<div>
+				<label>Password</label>
+				<input type="password" />
+			</div>
+			<div>
+				<input type="submit" class="submit" value="Login" />
+			</div>
+		</form>
+	</div>
+</div>
+
+<div class="demo-description">
+
+<p>A link to a login form that opens as a popup. [Not quite functional, focus handling needs to get better]</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>