对话框用于，像添加操作，需要表单数据录入的情况。并且，录入表单在默认的情况下面是隐藏的。在点击“添加”的时候，弹出对话框，来进行录入。
基本属性
1.modal
当modal属性值为true时，弹出对话框后，对话框的底层是不可以进行操作的。
2.title,width,height
分别表示对话框的标题，宽度，高度。
3.collapsible,minimizable,maximizable
默认情况下，对话框右上角的操作按钮只有关闭。通过这3个属性，可以为对话框添加：折叠、最小化、最大化按钮。
4.resizable
该属性用于说明对话框的大小是否可以调节。
5.iconCls
这个属性可以修改对话框左侧的图标和title一起说明该对话框的用途。
iconCls:'icon-add1'
弹出对话框之前，先将其显示，否则对话框将无内容
虽然可以有css载入，或者在dialog中使用href引入对话框的方式。但是，我喜欢将弹出的内容直接写在页面里面，隐藏起来，然后触发弹出。
<body> <input type="button" id="add" value="添加" /> <div id="dialog" style="display: none;"> 姓名： <input type="text" id="name" /><br /> 年龄： <input type="text" id="age" /> </div> <script type="text/javascript"> $(document).ready(function () { $("#add").click(function () { $("#dialog").show();//必须先显示，再弹出 $("#dialog").dialog({ title: "添加", width: 400, height: 200 }); }); }); </script> </body>
toolbar
toolbar显示的位置在对话框内容的左上方，而buttons显示的位置在对话框内容的右下方，它们的使用方式基本相同。toolbar和buttons的值是数组，格式如下：
[
{text:'Edit',iconCls:'icon-edit',handler:function(){...}},
{},{},{}
]
其中，text是按钮的名称，iconCls是按钮的图标，handler是按钮点击时触发的事件。另外，还可以为按钮配置id属性。配置id属性的好处是，在点击按钮后，我们希望按钮禁用。然后，等待事件处理完毕，再启用按钮。
$('#按钮id').linkbutton('disable');
$('#按钮id').linkbutton('enable');
buttons
buttons的使用和toolbar一样，下面通过一个例子演示一下。
<body> <input type="button" id="add" value="添加" /> <div id="dialog" style="display: none;"> 姓名： <input type="text" id="name" /><br /> 年龄： <input type="text" id="age" /> </div> <script type="text/javascript"> $(document).ready(function () { $("#add").click(function () { $("#dialog").show(); $("#dialog").dialog({ title: '添加', width: 400, height: 200, modal: true, buttons: [{ text: 'Edit', id: 'Edit', iconCls: 'icon-edit', handler: function () { $('#Edit').linkbutton('disable'); $.ajax({ type: "POST", url: "..", async: false, data: null, success: function (data) { $('#Edit').linkbutton('enable'); } }); } }, { text: 'Help', iconCls: 'icon-help', handler: function () { alert(''); } }] }); }); }); </script> </body>
Events
dialog的事件从window中继承，而window又从panel中继承。所以，dialog可定义onLoad、onClose这些事件来进行相关处理操作。
通过href将对话框内容和当前页面分开
function akmaterial_add() { $("<div></div>").dialog({ id: "akmaterial_add_dialog", href: "AkMaterial/Add", title: "添加物料", height: 400, width: 500, modal: true, buttons: [{ id: "akmaterial_add_btn", text: '添 加', handler: function () { $("#akmaterial_addform").form("submit", { url: "AkMaterial/AddProcess", onSubmit: function () { $('#akmaterial_add_btn').linkbutton('disable'); if ($(this).form('validate')) { return true; } else { $('#akmaterial_add_btn').linkbutton('enable'); return false; } }, success: function (data) { var result = eval('(' + data + ')'); if (result.Success) { $("#akmaterial_add_dialog").dialog('destroy'); $.show_warning("提示", result.Message); akmaterial_databind(); } else { $('#akmaterial_add_btn').linkbutton('enable'); $.show_warning("提示", result.Message); } } }); } }], onLoad:function() { }, onClose: function () { $("#akmaterial_add_dialog").dialog('destroy'); } }); }
在WebForm中，弹框里的服务器控件无响应
var dlg = jQuery("#dd").dialog({ draggable: true, resizable: true, closed:true, show: 'Transfer', hide: 'Transfer', autoOpen: false, width:600, minHeight: 10, minwidth: 10 }); dlg.parent().appendTo(jQuery("form:first"));