基础效果
demo01.png
可见，这样一个弹出框效果，看起来效果也十分的美观，书写起来也很简单，只需要调用一个方法即可。首先，我们来看看HTML 代码
<div id="myDialog" title="My Dialog">
<p>Hello Dialog Hello Dialog Hello Dialog Hello Dialog Hello Dialog Hello Dialog </p>
</div>
注意看了，div 中的 title 属性指定的将是我们弹出框的标题内容。下面就让我们用一行代码实现这个炫酷的效果吧。
<script>
$(document).ready(function () {
$("#myDialog").dialog();
})
</script>
注意，在使用的时候，别忘了引入我们所依赖的文件
<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" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
带有动画效果的 Dialog
上面的弹出框，看起来是不错，但如果能通过一个按钮将其弹出，并且带有动画效果就好了，像下面这样
demo02.gif
是不是感觉好看多了，看看 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>
首先，我们设置 autoOpen 的值为 false， 这样我们的弹出框一开始就处于关闭状态了。然后开始设置 show和 hide 属性，我们打开和关闭设置了不同的动画效果，其实官方给我们提供的不止这两种效果。最后就是为 button 绑定一个click 事件，设置点击的时候将弹出框打开。
带按钮的弹出框
事实上，这种效果我们经常在网站中看到，弹出一个框让我们选择，像下面这样。
demo03.png
下面就针对 JS 进行分析
<script>
$(document).ready(function () {
$("#myDialog").dialog({
width: 400,
height: "auto",
resizable:false,
modal: true,
buttons: {
"喜欢": function () {
$("#myDialog").dialog("close");
},
"厌恶": function () {
$("#myDialog").dialog("close");
}
}
})
})
</script>
这里，我们为弹出框设置了宽度为 400，高度为自适应，也就是根据内容的大小动态决定，注意这里多了两个新的属性 resizable 和 modal ，首先说说我们为什么设置 resizable 为 false，其实这个属性的值默认为 true，也就是说默认我们的弹出框是可拉伸的，由于这里我们已经为其设置了高度和宽度，所以我们并不想在让用户去拉伸其高度或者宽度，因为那可能导致界面很丑陋，这是我们不想看到的。modal 属性我们将其设置为 true ， 仔细看看截图除弹出框以外的部分，是个灰色的背景，也就是说这个时候，除了弹出框我们不能在选中页面中的任何其他元素。之后我们就设置了两个按钮，并为其设置了点击后执行的方法。
