基础效果

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 ， 仔细看看截图除弹出框以外的部分，是个灰色的背景，也就是说这个时候，除了弹出框我们不能在选中页面中的任何其他元素。之后我们就设置了两个按钮，并为其设置了点击后执行的方法。