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 :

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值