jquery中有dialog；dialog是jQuery UI庫的一個UI元件，運用該元件的好處是不用刷新網頁，可以直接彈出一個div層，讓使用者輸入資訊；使用該元件時不僅要引入jquery，還有引進jQueryUI的js及相關css檔。
本教學操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。
dialog是jQuery UI 函式庫的UI元件，所以使用dialog時，不只引入jQuery.js(因為它只是輕量級的基礎框架)，還需要引入jQueryUI的js及相關css檔案
使用dialog的好處就是不用刷新網頁，直接彈出一個div層，讓使用者輸入資訊。使用起來也比較方便。
jquery ui-dialog在web開發中運用還是比較多的。最常見的例子就是登入功能的實作。
範例如下：
最簡單的實作在jquery的ready方法裡面配置一個dialog對話框。如：
$("#dialogDiv").dialog();但是這個並不能滿足我們的要求，所以我們有必要了解它的常用屬性和方法。這是我demo中的配置。如下:
$("#dialogDiv").dialog({
autoOpen : false, // 是否自动弹出窗口
modal : true, // 设置为模态对话框
resizable : true,
width : 410, //弹出框宽度
height : 240, //弹出框高度
title : "用户登录", //弹出框标题
position : "center", //窗口显示的位置
buttons:{
'确定':function(){
//调用登录的方法
},
'取消':function(){
$(this).dialog("close");
}
}
});註: ”dialogDiv」表示元素的id。
常用屬性
autoOpen：這個屬性為true的時候dialog被呼叫的時候自動開啟dialog視窗。當屬性為false的時候，一開始隱藏窗口，呼叫dialog(“open”)的時候才彈出dialog窗口。預設為：true。
position：dialog的顯示位置：可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一個字符串數組例如['right','top']。
title：dialog的標題，預設為空。
modal：是否使用模式窗口，模式視窗開啟後，頁面其他元素將無法點擊，直到關閉模式視窗。預設為false不是模式視窗。
closeOnEscape： 為true的時候，點選鍵盤ESC鍵關閉dialog，預設為true。
draggable：draggable是否可以使用標題頭進行拖曳，預設為true，可以拖曳。
resizable：resizable是否可以改變dialog的大小，預設為true，可以改變大小。
常用方法
open：開啟dialog，一句話$(“#id”).dialog(“open”)。
close：關閉dialog，一句話 $(“#id”).dialog(“close”)。
disable：設定dialog不可用。
enable： 設定dialog可用。
isOpen：判斷dialog是否為開啟狀態，若處於開啟狀態，則回傳true。
destroy： 銷毀dialog。
moveToTop：將dialog移到最上層。
option：用來設定和取出dialog的值，例如我們為dialog設定標題，程式碼：$(“#dialogDiv”).dialog(“option”, “title”, “登入”)
看看我的demo吧，只是簡單的呼叫了open方法。其它方法可以自己試試，更多的屬性和方法請到官網去看看API，地址：http://api.jqueryui.com/dialog/ 。這是我的登入頁面。呼叫方法：
$("#dialogDiv").dialog("open");效果如圖:
這是頁面的程式碼，如下：
以上是jquery中有dialog嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
