jquery中有dialog；dialog是jQuery ui庫的一個UI組件，運用該組件的好處是不用刷新網頁，可以直接彈出一個div層，讓用戶輸入信息；使用該組件時不僅要引入jquery，還有引入jQueryUI的JS及相關css文件。
本教程操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。
jquery中有dialog嗎
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");
效果如圖:
? ? 這是頁面的代碼，如下：??
? ? 頁面很干凈吧，樣式可以自己定的。dialog使用簡單方便，推薦大家使用。
相關視頻教程推薦：jQuery視頻教程
