在做网站开发时，经常会处理一些信息提示，消息弹出等处理，这时就需要一个弹出框来完成了。HTML里自带的alert弹出框太丑陋了，也不能用样式美化。以前往往我们需要自己自定义HTML代码来做弹出框，还需要写一些JS脚本来完成对应功能。现在不需要写这么多代码了，用一些插件库提供的功能就行了。下面我们一起看下easyui提供的dialog控件是怎么完成我们的弹出框需求功能的。
方法/步骤
2
插件库下载回来后，我们需要把它引入到自己的页面上，才能使用。除了对应的JS文件外，还需要引入css文件。如图：
3
然后就是写上对应的弹出框的内容了，HTML如图，其中关键的地方是需要为对应div加上class: easyui-dialog, 另外还有一些属性参数在 data-options里设置，这里设置的意思是：弹出框不可改变大小；是模态窗口（即只能关闭了这个窗口，才能点击页面窗口外的其他内容）
4
看下效果，简单的几行html代码，就生成了一个标准的，可美化的弹出框了。
5
除了应用不同的theme来改变弹出框的样式，美观外，我们还可以自定义自己的样式来做美化，如图，我们加了些自己的样式，得到另一色彩效果的弹出框。（我们需要为body添加一个样式，
，以便样式有更高优先权来覆盖原样式）6
我们还可以为弹出框配置些按钮，比如在底部添加个确定按钮，按钮点击后处理什么操作，根据自己的实际需求来写，比如保存一些数据，或者关闭窗口等等。
7
模态窗口中，很多弹出框的插件在点击遮蔽层时，就会自动关闭掉弹出框，但easyui的弹出框却不能，看了下文档，也没发现有参数能设置。要实现这个功能怎么办？只能自己加些逻辑来实现了。也不难，我们只要为遮蔽层（他的div class为window-mask）添加一个点击事件，然后响应dialog弹出框的 close事件就行了，代码如图：我们在点击弹出框外的任意地方，弹出框都会自动关闭掉。
注意事项
1
easyui的弹出框还有其他的一些参数可设置的，有兴趣的朋友可自行到官方网站看对应的文档
2
有不明白或需要帮助的地方也可在本文下方点‘我有疑问’来留下评论