开发者社区> 科技探索者> 正文

js中window.showModalDialog各浏览器居中和传参实例兼以及一些兼容性问题

简介:
+关注继续查看

浏览器居中以及传参实例

window.showModelDialog可设置center参数为yes,保证其在子窗口在父窗口居中。

但是该参数只对IE浏览器有效,对火狐无效,只有通过计算模态窗口的居中位置。

 

解决办法

function openShowModalDialog(url,param,whparam,e){
 
 // 传递至子窗口的参数
 var paramObj = param || { };
 
 // 模态窗口高度和宽度
 var whparamObj = whparam || { width: 500, height: 500 };
 
 // 相对于浏览器的居中位置
 var bleft = ($(window).width() - whparamObj.width) / 2;
 var btop = ($(window).height() - whparamObj.height) / 2;
 
 // 根据鼠标点击位置算出绝对位置
 var tleft = e.screenX - e.clientX;
 var ttop = e.screenY - e.clientY;
 
 // 最终模态窗口的位置
 var left = bleft + tleft;
 var top = btop + ttop;
 
 // 参数
 var p = "help:no;status:no;center:yes;";
     p += 'dialogWidth:'+(whparamObj.width)+'px;';
     p += 'dialogHeight:'+(whparamObj.height)+'px;';
     p += 'dialogLeft:' + left + 'px;';
     p += 'dialogTop:' + top + 'px;';
 

  return showModalDialog(url,paramObj,p);
}

 


下面是一个使用该方法和传参的实例
  
Father.html

<head>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function (e) {
                var stuObj = { name: "xy", age: 22 };
                var whObj = { width: 300, height: 200 };
                var returnValue = openShowModalDialog("Son.html", stuObj, whObj, e);
                if (returnValue) {
                    alert("传回来的name:" + returnValue.name);
                }
            });
        });
    </script>
</head>

<body>
    <input id="btn" type="button" value="模态测试按钮" />
</body>


Son.html
<head>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            
            // 接收父窗口参数
            var obj = window.dialogArguments;
            alert("name:" + obj.name + "age:" + obj.age);

            // 回传参数至父窗口
            window.returnValue = { name: "lily", age: 21 };
            window.close();

        });
    </script>
</head>

 

 

兼容性问题


发现问题

对话框在firefox仍可拉伸大小,并显示地址栏


解决办法

1 在Firefox地址栏中输入about:config

2 在Filter中输入dom.disable_window_open_feature.location

3 双击赋值,将true改为false

以上解决办法只能让firefox不显示地址栏,但仍可以拉伸。

其实window.showModalDialog本来就是ie的方法,FF对其支持难免有些不足。

本文转自IT徐胖子的专栏博客51CTO博客,原文链接http://blog.51cto.com/woshixy/975628如需转载请自行联系原作者


woshixuye111

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
解决浏览器不兼容websocket
本例使用tomcat 7.0的websocket做为例子。 1.新建web project。2.找到tomcat 7.0 lib 下的 catalina.jar,tomcat-coyote.jar添加到项目中.
741 0
阿里云ECI如何6秒扩容3000容器实例?
2021年云栖大会现场,阿里云工程师演示了在6秒时间内成功启动3000个ECI,并全部进入到Running状态。本文将为你揭开阿里云ECI是如何做到极速扩容的。
324 0
阿里云宣布第七代 ECS 实例全面商业化:阿里云云盒亮了
阿里巴巴今天在北京举行了阿里云智能峰会,在峰会上,阿里巴巴集团高级研究员蒋江伟宣布,阿里云第七代 ECS 实例全面商业化。
195 0
使用xshell连接服务器问题:ssh_exchange_identification: Connection closed by remote host
在连接服务器的时候遇到了如下的问题: 在网上查找方法: 1、让/etc/hosts.allow 和/etc/hosts.
1332 0
ecmall二次开发 直接实例化mysql对象
$db = &db(); // 第一步赋值数据库类库, $db->query(sql); // 第二步执行mysql 语句; 常用的数据库函数: 得到一行数据 $user=$db->getrow("select * from ecm_member where user_id=111...
656 0
常见的浏览器兼容性问题总结
1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率:100% 解决方案:使用CSS通配符*,设置内外补丁为0 *{ margin: 0; padding: 0;} 2.
1615 0
Windchill 在 AIX heapdump 和 javacore的问题
Windchill 在 AIX heapdump 和 javacore的问题 Windchill系统中,产生dump和javacore的主要原因是内存溢出,一般情况下,Methodserve...
932 0
弹性容器实例服务 ECI 1月22日正式商业化收费
阿里云宣布弹性容器实例 ECI(Elastic Container Instance)正式商业化。
5650 0
5488
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载