jqueryui的dialog組件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.9.custom.css">
<title>Dialog</title>
<script
src="development-bundle/jquery-1.4.4.js">
</script>
<script
src="development-bundle/ui/jquery.ui.core.js">
</script>
<script
src="development-bundle/ui/jquery.ui.widget.js">
</script>
<script
src="development-bundle/ui/jquery.ui.position.js">
</script>
<script
src="development-bundle/ui/jquery.ui.dialog.js">
</script>
<script src="development-bundle/ui/jquery.ui.mouse.js">
</script>
<script
src="development-bundle/ui/jquery.ui.draggable.js">
</script>
<script
src="development-bundle/ui/jquery.ui.resizable.js">
</script>
<script>
$(function(){
var execute = function(){
     var answer = $("#myDialog").find("input:checked").val();//獲取對話框中的值
     $("<p>").text("Thanks for selecting " + answer).appendTo($("body"));
     $("#myDialog").dialog("close");
};
var cancel = function() {$("#myDialog").dialog("close"); };
var dialogOpts = {
	//title: '<a href="#">A link title!</a>',  //設置標題
	modal: true,
	buttons: {
	"Ok": execute,
	"Cancel": cancel},
	//show: true,   //設置打開動畫
    //hide: true,
	width: 500,
	height: 300,
	minWidth: 150,
	minHeight: 150,
	maxWidth: 600,
	maxHeight: 450,
	/**********************事件***************************/
	open: function() {
	   $("#status").children(":last").text("The dialog is open");
	},
	close: function() {
	   $("#status").children(":last").text("The dialog is closed");
	},
	beforeclose: function() {
	    if ($(".ui-dialog").css("width") > 300) {
	            return false;
	     }
	},
	//autoOpen:false
	autoOpen:true
    };
	
	$("#myDialog").dialog(dialogOpts);
	
	$("#toggle").click(function() {
		if(!$("#myDialog").dialog("isOpen")) {
		   $("#myDialog").dialog("open");
		} else {
		   $("#myDialog").dialog("close");
		}
	});
});
</script>
</head>
<body>
<!--<div id="myDialog" title="This is the title!"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis
  volutpat ligula. Integer vitae felis quis diam laoreet
  ullamcorper. Etiam tincidunt est vitae est. </div>
<!--<div id="dialog2" title="Dialog 2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
  sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat
  ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam
  tincidunt est vitae est. </div>-->
<!--<div id="status" class="ui-widget ui-dialog ui-corner-all
ui-widget-content">
  <div class="ui-widget-header ui-dialog-titlebar
ui-corner-all">Dialog Status </div>
  <div class="ui-widget-content ui-dialog-content"> </div>
</div>-->
<!--<button type="button" id="toggle">Toggle dialog!</button>
-->
<p>Please answer the opinion poll:
</p>
<div id="myDialog" title="Best Widget Library">
  <p>Is jQuery UI the greatest JavaScript widget library? </p>
  <label for="yes">Yes! </label>
  <input type="radio" id="yes" value="yes" name="question" checked="checked">
  <br>
  <label for="no">No! </label>
  <input type="radio" id="no" value="no" name="question">
</div>
</body>
</html>

對話框選項：