弹出窗口两种方式

最新推荐文章于 2023-10-04 15:42:29 发布

yanbh

最新推荐文章于 2023-10-04 15:42:29 发布

阅读量483

点赞数

分类专栏： js 文章标签： js 弹窗

本文链接：https://blog.youkuaiyun.com/ybh452/article/details/50395812

版权

js 专栏收录该内容

3 篇文章

订阅专栏

1.window.showModalDialog：
var feature = "dialogWidth:615px;dialogHeight:505px;status:no;help:no;scroll:no;resizable:no;center:yes";
window.showModalDialog(url, Object(传给弹出窗口的参数，可以是任何类型),feature)
决定窗口的外观是第三个参数feature，其中center属性指定为"yes",弹出窗口居中；
如果想手动指定弹出窗口的具体位置，去掉center属性，
用dialogTop(弹出窗口上边界居屏幕上的距离)
dialogLeft(弹出窗口左边界居屏幕左的距离)属性
如：(距离是px像素)，这里手动指定弹出窗口位置居中
var iTop = (window.screen.availHeight-550)/2; //获得窗口的垂直位置，550为弹出窗口的height;
var iLeft = (window.screen.availWidth-640)/2; //获得窗口的水平位置，640为弹出窗口的width;
var feature = "dialogWidth:615px;dialogHeight:505px;status:no;help:no;scroll:no;resizable:no;dialogTop:'+iTop+';dialogLeft:'+iLeft+';";
2.window.open：
var feature = "width=615,height=505,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes"
window.open(url, window(弹出窗口的名字), feature)
手动指定弹出窗口位置，属性top：(弹出窗口上边界居屏幕上的距离)
属性left：(弹出窗口左边界居屏幕左的距离)
下面指定弹出窗口位置居中(这种方式没有center属性)：
var iTop = (window.screen.availHeight-550)/2; //获得窗口的垂直位置,550为弹出窗口的height;
var iLeft = (window.screen.availWidth-640)/2; //获得窗口的水平位置,640为弹出窗口的width;
var feature = "width=615,height=505,top="+iTop+",left="+iLeft+",menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes";
子窗口调用父窗口的东东(控件或者方法)：
1. window.open打开的子窗口有window.opener属性
子窗口通过window.opener.xxxx获得父窗口的东东。
如：window.opener.document.getElementById("userName");得到父页面的控件。
window.opener.fresh();调用父页面的js方法。
2. window.showModalDialog：不支持window.opener，
父窗口通过showModalDialog(url,para,feature)第二个参数para传参数给子窗口，
子窗口通过window.dialogArguments获得父窗口穿过来的东西。及获得传过来的的二个参数
子窗口通过window.dialogArguments.xxxx获得父窗口的东东。
如：这里传父页面的的window过去
父页面：showModalDialog(url,window,feature)
子页面：var name = window.dialogArguments.document.getElementById("userName").value;得到父页面的控件。
var name = window.dialogArguments.fresh();调用父页面的方法。
这里的window.dialogArguments就相当于父页面的window，它是通过showModalDialog方法的第二个参数window传过来的，
当然也可以传数组或其它变量。
showModalDialog(url,[1,2,3],feature) //父页面传一个数组给子窗口
showModalDialog(url,window,feature) //父页面把自己的window参数传给子窗口