對話框用於，像添加操作，需要表單數據錄入的情況。並且，錄入表單在默認的情況下面是隱藏的。在點擊“添加”的時候，彈出對話框，來進行錄入。
基本屬性
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"));