功能描述
功能性
1.是否显示标题栏
2.标题自定义,支持 HTML 格式
3.是否显示关闭按钮
4.是否固定定位
5.自定义设置窗体弹出位置
6.是否显示遮罩层
7.遮罩层颜色设置
8.遮罩层透明度设置
9.窗口层叠顺序设置,以实现多级弹出
10.是否显示窗体阴影
11.定时关闭功能
12.自定义窗口大小
13.自定义窗口内容,支持 HTML 格式和 jquery 对象格式,不支持 ajax 动态加载内容
14.点击遮罩层触发事件,一般用于点击遮罩层时关闭窗体
15.窗口关闭时触发事件,用于窗体关闭后,对页面其他功能进行的操作
16.窗体显示方法
17.窗体隐藏方法
非功能性
1.窗体显示/隐藏淡入淡出效果
2.ie6 中窗体模拟固定定位的缓动效果
设计思路
一般弹出窗体控件都带有遮罩层,以实现模式效果,但我认为遮罩层不应依存于窗体
控件中,应单独存在,有自己独立的调用方式,从功能角度实现模块化。
跨浏览器固定定位
首先要说说这个东西 position:fixed,跨浏览器的固定定位。
“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过
CSS 中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的
position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定
位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。”
程序中很多地方利用了这个 css 属性,但 ie6 不支持,ie6 中只能模拟这个效果。主要
思路就是通过在 onscroll 事件中,通过不断判断改变层的位置实现,但这种实现的弊端就
是作用元素抖动得十分厉害,而在此控件中我的实现思路是遮罩层未获取窗口可视区域大
小,而是获取页面元素集合大小,对整个页面进行遮罩,这种的好处,既省去了在页面滚
动时不断复位遮罩层消耗的性能,也避免了抖动影响用户体验。窗体本身,由于大小限制
止只能采用
在 onscroll 事件中不断复位,但为了抖动不影响用户体验,在复位过程中我加入了缓动动