【转】用Div模拟模态对话框..

笔者:Showwin
日期:2006.10.23

对话框分为模态对话框和非模态对话框.
所为模态对话框就是指在该对话框返回之前程序只能跟该对话框交互.像我们使用菜单命令的"打开"对话框就是一个模态的.alert()调用的也是模态的.理解了模态对话框想必非模态大家也知道是什么意思了吧.呵呵.这里我主要说说建创自定义的模态对话框.


为什么不调用系统函数呢?在DOM对象中要建创一个模态对话框调用window.showModalDialog(sURL,vArguments,sFeatures).有时我们很希望使用我们自定义的confrim().特别是随着Ajax技术的发展,Web桌面式应用程序的开发,我们越来越希望有一套自己的style.但是很让我们失望的是系统给我们创建的都是带有title的窗口.下面我给大家提供一个创建具有模态效果的自定义窗口的思路


思路:我们都知道windows窗口是由a-z序的层结构显示的.同样网页也是这种层次结构.style中z-index(通常称z序)属性决定层的位置.默认z-index:-1是最底层.通常最底层是我们的页面的主要构架和内容.如果我们要使用自定义的窗口/对话框,则应该z-index>-1.但是这样我们设计的一个非模态的对话框/窗口,焦点可以被自定义窗口以外的元素获焦.其实我们理解窗口是以"层"为结构的道理之后,很容易可以想到在网页最底层与自定义窗口框之间再插入一个"层",使这个"层"完全笼罩在最底层之上而居于对话框之下,所为"完全笼罩"也就是大小能遮住最底层的内容(其目的是为了让最底层不能获焦),为了能让"层"起作用,必须设置其背景颜色,否则层无效.这样页面的最底层就被笼罩层屏蔽了,由于自定义窗口层在笼罩层之上,所以现在页面中只能看到笼罩层和自定义窗口层了,这样最底层都看不见了又怎么获焦呢.嘿嘿.可能我们使用自定义窗口的同时还希望能看到最底层内容,这时我们可以将笼罩层设置成透明的,这样最底层的内容就显示出来了,只是在自定义窗口返回前最底层无法获焦..至此,我们的模态对话框完成了..


步骤:
1.首先.做好自定义的窗口/对话框层.并将其隐藏style.display=none
2.制作笼罩层.插入div,设置其宽/高大于最底层宽/高,完全笼罩在最底层上面,设置其透明度alpha(opacity=0),并将其隐藏style.display=none.
3.调用对话框时同时将两个层同时显示出来
4.关闭对话框时同时将两个层隐藏