通过本文主要向大家介绍了Dialog,弹出层等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
原理很简单，通过JS动态构建一个div层，将其插入到body中，然后通过调整position的CSS属性为absolute或fixed，使其脱离原来的文档流的位置。再通过适当的加工美化就成了。
| 选项 | ||
| 名称 | 描述 | 默认值 |
|---|---|---|
| title | 标题栏的文本 | 标题 |
| closeText | 关闭按钮文字 | [关闭] |
| showTitle | 是否显示标题栏，若为否，则标题和关闭按钮都将不显示。 | true |
| draggable | 是否可以拖动框体。 | true |
| modal | 模态对话框，若为是，则不可操作背景层。 | true |
| center | 是否居中显示，若为否，则通过CSS中的内容进行定位。 | true |
| fixed | 对话框是否跟随滚动条移动。 | true |
| time | 自动关闭对话框时间，单位毫秒，若为0，表示不会自动关闭。 | 0 |
| id | 对话框的ID。若为false，则表示自动产生。 | false |
| 回调函数 | ||
| 名称 | 描述 | 返回值类型 |
| beforeShow | 在显示之前调用，若返回false，则不显示对话框。 | bool |
| afterShow | 显示之后调用。 | 无 |
| beforeHide | 在隐藏之前调用，若返回false，则不隐藏对话框。 | bool |
| afterHide | 隐藏之后调用。 | 无 |
| beforeClose | 在关闭之前调用，若返回false，则不关闭对话框。 | bool |
| afterClose | 关闭之后调用。 | 无 |
自定义CSS
插件为对话框的每一个部分都提供了一个CSS类名，很容易实现CSS的自定义：
| 类名 | 描述 |
|---|---|
| .dialog-overlay | 模态对话框时，的背景遮盖层。 |
| .dialog | 对话框的CSS。 |
| .dialog .bar | 标题栏的CSS。包含了标题和关闭按钮。 |
| .dialog .bar .title | 标题栏的标题部分。 |
| .dialog .bar .close | 标题栏的关闭按钮部分。 |
| .dialog .content | 内容部分。 |
你可以直接修改这些CSS类，进行全局的修改，也可以通过id加类名的方式修改某一个对话框。
您可能想查找下面的文章:
- Easyui使用Dialog行内按钮布局的实例
- jquery dialog获取焦点的方法
- JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
- Jquery Easyui对话框组件Dialog使用详解（14）
- jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
- jquery popupDialog 使用 加载jsp页面的方法
- jQuery插件easyUI实现通过JS显示Dialog的方法
- jQuery Dialog 取消右上角删除按钮事件
- jQuery dataTables与jQuery UI 对话框dialog的使用教程
- 修改jquery中dialog的title属性方法(推荐)