jQuery是一款強(qiáng)大的JavaScript庫，它可以使JavaScript編程更加簡單、易讀和可維護(hù)。其中，jQuery dialog是非常常用的一個組件，它可以實(shí)現(xiàn)彈出框的效果。
下面我們來看看如何使用jQuery dialog實(shí)現(xiàn)一個簡單的彈出框：
<html>
<head>
<!--引入jQuery和jQuery UI庫文件-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<script>
$(document).ready(function(){
//彈出框效果
$("#myDialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"確認(rèn)": function() {
//點(diǎn)擊確認(rèn)按鈕執(zhí)行代碼
alert("確認(rèn)");
$(this).dialog("close");
},
"取消": function() {
//點(diǎn)擊取消按鈕執(zhí)行代碼
alert("取消");
$(this).dialog("close");
}
}
});
});
function showDialog(){
//彈出框顯示
$("#myDialog").dialog("open");
}
</script>
</head>
<body>
<!--彈出框HTML代碼-->
<div id="myDialog" title="彈出框">
<p>這里是彈出框的內(nèi)容。</p>
</div>
<!--按鈕觸發(fā)彈出框-->
<button onclick="showDialog()">彈出框</button>
</body>
</html>代碼解釋：
//彈出框效果
$("#myDialog").dialog({
autoOpen: false, //初始狀態(tài)下不自動展開彈出框
modal: true, //讓彈出框遮罩全屏，表示該彈出框的下面的內(nèi)容不能被交互
buttons: { //設(shè)置彈出框底部的按鈕
"確認(rèn)": function() {
//點(diǎn)擊確認(rèn)按鈕執(zhí)行代碼
alert("確認(rèn)");
$(this).dialog("close"); //關(guān)閉彈出框
},
"取消": function() {
//點(diǎn)擊取消按鈕執(zhí)行代碼
alert("取消");
$(this).dialog("close"); //關(guān)閉彈出框
}
}
});
function showDialog(){
//彈出框顯示
$("#myDialog").dialog("open");
}可以看出，使用jQuery dialog可以快速方便地實(shí)現(xiàn)彈出框效果，而且代碼清晰易讀、易于維護(hù)。