JQuery DialogBox是JQuery UI提供的一種彈框插件。它可以讓我們更方便地創(chuàng)建彈窗，提供了多種選項(xiàng)和回調(diào)函數(shù)，以及自定義樣式的能力。

首先，我們需要在頁(yè)面上引入JQuery UI庫(kù)，然后再引入dialog插件：

<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

創(chuàng)建DialogBox的方法如下：

$( "#dialog" ).dialog({
autoOpen: false, //自動(dòng)彈出
width: 400, //彈窗寬度
height: 300, //彈窗高度
modal: true, //是否模態(tài)框
buttons: { //自定義按鈕
"保存": function() {
//保存操作
},
"取消": function() {
$( this ).dialog( "close" );
}
},
close: function() { //關(guān)閉事件
//清空表單
}
});

上面的代碼創(chuàng)建了一個(gè)ID為“dialog”的彈窗，指定了寬度、高度、是否模態(tài)框、自定義按鈕和關(guān)閉事件。除此之外，還有許多其他的選項(xiàng)和回調(diào)函數(shù)可供使用。

使用DialogBox時(shí)，我們需要手動(dòng)打開(kāi)或關(guān)閉彈窗，可以使用下面的代碼：

//打開(kāi)彈窗
$( "#dialog" ).dialog( "open" );
//關(guān)閉彈窗
$( "#dialog" ).dialog( "close" );

在CSS中，我們可以使用以下樣式來(lái)自定義DialogBox的外觀：

.ui-dialog {
border: 2px solid #aaa;
background: #fff;
border-radius: 5px;
}
.ui-dialog-titlebar {
background: #aaa;
color: #fff;
border-radius: 5px 5px 0 0;
}
.ui-dialog-titlebar-close {
background: #fff;
color: #aaa;
font-size: 16px;
top: 9px;
right: 9px;
}
.ui-dialog-buttonset button {
background: #aaa;
color: #fff;
border-radius: 5px;
border: none;
padding: 5px 10px;
}
.ui-dialog-buttonset button:hover {
background: #666;
cursor: pointer;
}

JQuery DialogBox是一個(gè)非常實(shí)用的插件，可以用于各種場(chǎng)合。希望這篇手冊(cè)可以幫助大家更好地使用它。