今天用到了模态窗口,说实话觉得模态窗口的效果确实不应是首选,使用javascrpit+div模拟才是不错的选择,但是为了赶时间图省事,还是选择了模态窗口。以前对模态窗口了解的并不是很多,今天借这个机会自己给自己总结一下。
1.使用方法:
vreturnvalue = window.showmodaldialog(surl [, varguments] [, sfeatures])
vreturnvalue = window.showmodelessdialog(surl [, varguments] [, sfeatures])
参数说明:
surl
必选参数,类型:字符串。用来指定对话框要显示的文档的url。
varguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogarguments来取得传递进来的参数。
sfeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogheight 对话框高度,不小于100px,ie4中dialogheight 和 dialogwidth 默认的单位是em,而ie5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialog 对话框宽度。
dialogleft: 距离桌面左的距离。
dialogtop: 离桌面上的距离。
center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
resizable: {yes | no | 1 | 0 } [ie5+]:是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } [ie5+]:是否显示状态栏。默认为yes[ modeless]或no[modal]。
scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
还有几个属性是用在hta中的,在一般的网页中一般不使用。
dialoghide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
2.在ie8中如果再模态窗口中提交表单会弹出一个新页面,为了避免这个问题需要:
在<title></title>标签后加上<base target="_self">
我也不明白这是为什么。
3.关于滚动条的问题
一个比较郁闷的问题是:当弹出的模态窗口设置了高度和宽度时,如果出现了纵向的滚动条,那么横向的滚动条会一起出现,不管设置的宽度有多大。为了解决这个问题我采取了下面的不算高明的办法:
1.设置要弹出的页面的内容宽度为固定值(如:700px),弹出窗口的宽度值大于这个固定值(如710px)。
2.再要弹出的窗口中加上如下代码,去掉横向的滚动条:
<style type="text/css"> html { overflow: scroll; overflow-x: hidden; } body { overflow: scroll; overflow-x: hidden; } </style>