JavaScript 模态窗口的使用及传值:window.showModalDialog 和window.showModalessDialog

JavaScript 的window 对象提供的两个方法,用于新建一个(非)模态窗口,这是一个很朴素的窗口,虽然难看但却相当方便实用。方便之处在于往打开的新窗口中传数据,且在关闭了窗口后,原来的窗口也能轻易地接收到返回的数据。

window.showModalDialog 和window.showModalessDialog 的区别仅仅是前者打开的是模态窗口,而后者打开的是非模态窗口,两个函数的用法是一模一样的(模态指它始终处在最前端,在关闭它之前无法对父窗口进行操作)。

window.showModalDialog 和window.showModalessDialog 的调用格式(具体使用方法请参考js手册):

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

模态窗口的使用步骤一般是这样的:

1. 在父页面中调用window.showModalDialog 打开模态窗口,调用的时候可以传递数据,这个方法会有一个返回值,待会儿会用上;

2. 在打开的子窗口中可通过window.dialogArguments 来获取父页面传递的数据,进行了相关的操作之后,在关闭窗口之前把要返回给父页面的值赋给window.returnValue 即可,另外关闭窗口也可调用window.close() 实现;

3. 在父页面中window.showModalDialog 的返回值便是子窗口返回的数据。

注:以上窗口间的传值的类型是混合型的,即任意类型(包括数组和对象等)。

这里举一个例子,在一个页面中收集用户名,然后打开新窗口,在新窗口中显示用户名并要求选择一个爱好,然后提交将窗口关闭,最后在原来的页面中显示该用户的爱好,代码比较简单,相信大家都能看懂~

父页面:

模态窗口 modal_dialog.html :

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页