基礎(chǔ)效果
可見拾给，這樣一個(gè)彈出框效果，看起來效果也十分的美觀兔沃，書寫起來也很簡(jiǎn)單蒋得，只需要調(diào)用一個(gè)方法即可。首先乒疏，我們來看看HTML 代碼
<div id="myDialog" title="My Dialog">
<p>Hello Dialog Hello Dialog Hello Dialog Hello Dialog Hello Dialog Hello Dialog </p>
</div>
注意看了额衙，div 中的 title 屬性指定的將是我們彈出框的標(biāo)題內(nèi)容。下面就讓我們用一行代碼實(shí)現(xiàn)這個(gè)炫酷的效果吧怕吴。
<script>
$(document).ready(function () {
$("#myDialog").dialog();
})
</script>
注意窍侧，在使用的時(shí)候，別忘了引入我們所依賴的文件
<script src="jquery-3.0.0.min.js"></script>
<script src="jquery-ui.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">-->
<link rel="stylesheet" >
帶有動(dòng)畫效果的 Dialog
上面的彈出框转绷，看起來是不錯(cuò)伟件，但如果能通過一個(gè)按鈕將其彈出，并且?guī)в袆?dòng)畫效果就好了议经，像下面這樣
是不是感覺好看多了斧账，看看 JS 代碼的改變
<script>
$(document).ready(function () {
$("#myDialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#openBtn").button().on("click", function () {
$("#myDialog").dialog("open");
})
})
</script>
首先购笆，我們?cè)O(shè)置 autoOpen 的值為 false蛾扇， 這樣我們的彈出框一開始就處于關(guān)閉狀態(tài)了。然后開始設(shè)置 show和 hide 屬性食听，我們打開和關(guān)閉設(shè)置了不同的動(dòng)畫效果籍救，其實(shí)官方給我們提供的不止這兩種效果习绢。最后就是為 button 綁定一個(gè)click 事件，設(shè)置點(diǎn)擊的時(shí)候?qū)棾隹虼蜷_蝙昙。
帶按鈕的彈出框
事實(shí)上毯炮，這種效果我們經(jīng)常在網(wǎng)站中看到，彈出一個(gè)框讓我們選擇耸黑，像下面這樣桃煎。
下面就針對(duì) JS 進(jìn)行分析
<script>
$(document).ready(function () {
$("#myDialog").dialog({
width: 400,
height: "auto",
resizable:false,
modal: true,
buttons: {
"喜歡": function () {
$("#myDialog").dialog("close");
},
"厭惡": function () {
$("#myDialog").dialog("close");
}
}
})
})
</script>
這里，我們?yōu)閺棾隹蛟O(shè)置了寬度為 400大刊，高度為自適應(yīng)为迈，也就是根據(jù)內(nèi)容的大小動(dòng)態(tài)決定，注意這里多了兩個(gè)新的屬性 resizable 和 modal 缺菌，首先說說我們?yōu)槭裁丛O(shè)置 resizable 為 false葫辐，其實(shí)這個(gè)屬性的值默認(rèn)為 true，也就是說默認(rèn)我們的彈出框是可拉伸的伴郁，由于這里我們已經(jīng)為其設(shè)置了高度和寬度耿战，所以我們并不想在讓用戶去拉伸其高度或者寬度，因?yàn)槟强赡軐?dǎo)致界面很丑陋焊傅，這是我們不想看到的剂陡。modal 屬性我們將其設(shè)置為 true 狈涮， 仔細(xì)看看截圖除彈出框以外的部分，是個(gè)灰色的背景鸭栖，也就是說這個(gè)時(shí)候歌馍，除了彈出框我們不能在選中頁面中的任何其他元素。之后我們就設(shè)置了兩個(gè)按鈕晕鹊，并為其設(shè)置了點(diǎn)擊后執(zhí)行的方法松却。
