jquery中有dialog；dialog是jQuery UI庫的一個(gè)UI組件，運(yùn)用該組件的好處是不用刷新網(wǎng)頁，可以直接彈出一個(gè)div層，讓用戶輸入信息；使用該組件時(shí)不僅要引入jquery，還有引入jQueryUI的js及相關(guān)css文件。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.2.1版本、Dell G3電腦。

jquery中有dialog嗎

dialog是jQuery UI 庫的一個(gè)UI組件，所以使用dialog時(shí)，不僅要引入jQuery.js(因?yàn)樗皇禽p量級(jí)的基礎(chǔ)框架)，還需要引入jQueryUI的js及相關(guān)css文件

運(yùn)用dialog的好處就是不用刷新網(wǎng)頁，直接彈出一個(gè)div層，讓用戶輸入信息。使用起來也比較方便。

jquery ui-dialog在web開發(fā)中運(yùn)用還是比較多的。最常見的例子就是登錄功能的實(shí)現(xiàn)。

示例如下：

最簡單的實(shí)現(xiàn)在jquery的ready方法里面配置一個(gè)dialog對(duì)話框即可。如：

 $("#dialogDiv").dialog();

但是這個(gè)并不能滿足我們的要求，所以我們有必要了解它的常用屬性和方法。這是我demo中的配置。如下:

$("#dialogDiv").dialog({ autoOpen : false,   // 是否自動(dòng)彈出窗口 modal : true,    // 設(shè)置為模態(tài)對(duì)話框 resizable : true, width : 410,   //彈出框?qū)挾?height : 240,   //彈出框高度 title : "用戶登錄",  //彈出框標(biāo)題 position : "center",  //窗口顯示的位置 buttons:{ '確定':function(){ //調(diào)用登錄的方法 }, '取消':function(){ $(this).dialog("close"); } } });

注: ”dialogDiv”表示元素的id。

常用屬性

autoOpen：這個(gè)屬性為true的時(shí)候dialog被調(diào)用的時(shí)候自動(dòng)打開dialog窗口。當(dāng)屬性為false的時(shí)候，一開始隱藏窗口，調(diào)用dialog(“open”)的時(shí)候才彈出dialog窗口。默認(rèn)為：true。

position：dialog的顯示位置：可以是’center’, ‘left’, ‘right’, ‘top’, ‘bottom’,也可以是top和left的偏移量也可以是一個(gè)字符串?dāng)?shù)組例如['right','top']。

title：dialog的標(biāo)題，默認(rèn)為空。

modal：是否使用模式窗口，模式窗口打開后，頁面其他元素將不能點(diǎn)擊，直到關(guān)閉模式窗口。默認(rèn)為false不是模式窗口。

closeOnEscape： 為true的時(shí)候，點(diǎn)擊鍵盤ESC鍵關(guān)閉dialog，默認(rèn)為true。

draggable：draggable是否可以使用標(biāo)題頭進(jìn)行拖動(dòng)，默認(rèn)為true，可以拖動(dòng)。

resizable：resizable是否可以改變dialog的大小，默認(rèn)為true，可以改變大小。

常用方法

open：打開dialog，一句話$(“#id”).dialog(“open”)。

close：關(guān)閉dialog，一句話 $(“#id”).dialog(“close”)。

disable：設(shè)置dialog不可用。

enable： 設(shè)置dialog可用。

isOpen： 判斷dialog是否為打開狀態(tài)，如果處于打開狀態(tài)，返回true。

destroy： 銷毀dialog。

moveToTop：將dialog移到最上層。

option：用于設(shè)置和取出dialog的值，比如我們?yōu)閐ialog設(shè)置標(biāo)題，代碼：$(“#dialogDiv”).dialog(“option”, “title”, “登錄”)

看看我的demo吧，只是簡單的調(diào)用了open方法。其它方法自己可以試試，