js中的showModalDialog实现页面弹窗效果
来源:原创
时间:2015-08-14
作者:脚本小站
分类:JS/JQuery
showModalDialog方法用来创建一个显示HTML内容的模态对话框,但是这个属性有一个缺点,高版本的Chrome浏览器不支持该属性,因为这个属性对用户体验不好,所以要淘汰掉。
下面可直接复制演示
在one.html页面中
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> </head> <body> <script type="text/javascript"> //要打开的页面 var sURL = "hehe.html"; // 将父窗口对象传给子窗口,也可以是其他对象 var vArguments = window; // 打开页面的样式布局信息,还有其他参数,Dom手册上有 var sFeatures = "dialogHeight:200px;dialogWidth:450px"; var val = window.showModalDialog(sURL,vArguments,sFeatures); // 弹出子页面的值 alert(val); </script> </body> </html>
2.在弹窗页面hehe.html中
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script> //子页面返回的值,可以是字符、对象等js支持的任意数据类型 window.returnValue = "hehe"; </script> </body> </html>