1. showModalDialog参数说明
window.showModalDialog(URL, ARGS,Features)(在父窗口中调用打开新的窗口)
URL
-- 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
ARGS -- 可选参数,类型:变体。向窗口中传递参数。在子窗口中使用window.dialogArguments来取得传递进来的参数。
Features -- 可选参数,类型:字符串。设置打开窗口的外观属性(height,width等)
Features详细属性说明:
dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth:
对话框宽度。
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。
2 使用例子
parent.html中js
var orderData={ orderCommet:orderCommet, email:email, pnumber:pnumber, cellnumber:cellnumber, ddetail:ddetail, dCity:dCity, sCity:sCity, sdetail:sdetail, pname:pname, startDate:startDate, leavetime:leavetime, serviceType:serviceType, driverUsernumber:driverUsernumber, }; window.showModalDialog("orderInfo.html",orderData,"height=600,width=700");
子窗口orderInfo.html中使用
var args = window.dialogArguments; $("#serviceType").html(args.serviceType); $("#driverNumber").html(args.driverUsernumber); $("#sCity").html(args.sCity); $("#sDetail").html(args.sdetail); $("#startDate").html(args.startDate); $("#leavetime").html(args.leavetime); $("#pname").html(args.pname); $("#dCity").html(args.dCity); $("#ddetail").html(args.ddetail); $("#pnumber").html(args.pnumber); $("#cellnumber").html(args.cellnumber); $("#email").html(args.email); $("#orderComment").html(args.orderCommet);
3.问题总结
1)直接使用window.open能打开新的窗口,使用window.opener能够在子窗口中访问父窗口中内容
2)使用showModalDialog按F5刷新不管用,需配合reload使用(onkeydown="if (event.keyCode==116){reload.click()} 给reload函 数中绑定页面,例如:<a id="reload" href="orderInfo.html" style="display:none">reload...</a>)
3)window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打 开的窗口的所有属性(区别于window.showModelessDialog)
4) 被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。