Model dialog (set background browser client area to gray)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Dialog</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<script type="text/javascript" src="./build/connection/connection.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<script language="javascript">
YAHOO.namespace('example.container');
function submitCallback(obj) {
var response = obj.responseText;
response = response.split("<!")[0];
document.getElementById("resp").innerHTML = response;
eval(response);
}
function submitFailure(obj) {
alert("Submission failed: " + obj.status);
}
function init() {
var handleCancel = function() {
this.cancel();
}
var handleSubmit = function() {
this.submit();
}
YAHOO.example.container.dlg = new YAHOO.widget.Dialog("dlg", { modal:true, visible:false, width:"350px", fixedcenter:true, constraintoviewport:true, draggable:true });
YAHOO.example.container.dlg.callback.success = submitCallback;
YAHOO.example.container.dlg.callback.failure = submitFailure;
var listeners = new YAHOO.util.KeyListener(document, { keys : 27 }, {fn:handleCancel,scope:YAHOO.example.container.dlg,correctScope:true} );
YAHOO.example.container.dlg.cfg.queueProperty("keylisteners", listeners);
YAHOO.example.container.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:handleSubmit } ]);
var handleManual = function(type, args, obj) {
alert("Manual submission of " + this.id + " detected");
}
YAHOO.example.container.dlg.manualSubmitEvent.subscribe(handleManual, YAHOO.example.container.dlg, true);
YAHOO.example.container.dlg.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div class="box">
<div class="hd">
<h1>Dialog Example</h1>
</div>
<div class="bd">
<p>Dialog is a Panel implementation that is used for submitting forms. You can submit the form in three different ways: asynchronously, using the Connection utility, form-based submission, or you can handle the submission manually.</p>
<p>The URLs for both asynchronous and form-based submission are taken from the form's action property.</p>
<p><button onclick="YAHOO.example.container.dlg.show()">Enter your information</button>
<div class="radioline first"><input type="radio" name="async" id="asyncon" checked onclick="YAHOO.example.container.dlg.cfg.setProperty('postmethod','async')"/><label for="asyncon">Submit asynchronously (Dynamic XmlHttpRequest, POST only)</label></div>
<div class="radioline"><input type="radio" name="async" id="asyncoff" onclick="YAHOO.example.container.dlg.cfg.setProperty('postmethod','form')" /><label for="asyncoff">Standard form submit (GET or POST)</label></div>
<div class="radioline last"><input type="radio" name="async" id="asyncoff" onclick="YAHOO.example.container.dlg.cfg.setProperty('postmethod','none')" /><label for="asyncoff">Do nothing and handle posts manually</label></div>
<select>
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
</select>
</p>
</div>
<div class="ft"></div>
</div>
<div class="box" style="margin-top:25px">
<div class="hd">
<h2>Server Response</h1>
</div>
<div class="bd">
<h3>Post Response Text</h2>
<p id="resp">[ Server Response will be displayed here ]</p>
</div>
</div>
<div id="dlg">
<div class="hd">Please enter your information</div>
<div class="bd">
<form name="dlgForm" method="POST" action="php/post.php">
<p>Please enter your personal contact information:</p>
<label for="firstname">First Name:</label><input type="textbox" name="firstname" /><br/>
<label for="lastname">Last Name:</label><input type="textbox" name="lastname" /><br/>
<label for="email">E-mail:</label><input type="textbox" name="email" /><br/>
<label for="state[]">State:</label><select multiple name="state[]" ><option value="California">California</option><option value="New Jersey">New Jersey</option><option value="New York">New York</option></select><br/>
<label for="radiobuttons">Radio buttons:</label>
<input type="radio" name="radiobuttons[]" value="1" checked/> 1
<input type="radio" name="radiobuttons[]" value="2" /> 2<br/>
<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1<br/>
<label for="textarea">Text area:</label><textarea name="textarea"></textarea><br/>
<label for="cbarray">Multi checkbox:</label>
<input type="checkbox" name="cbarray[]" value="1" /> 1
<input type="checkbox" name="cbarray[]" value="2" /> 2
</div>
</form>
</div>
</div>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category