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对其支持难免有些不足。

 

 

目录
相关文章
|
7月前
|
JavaScript 前端开发
js如何获得浏览器的宽高
js如何获得浏览器的宽高
55 5
|
7月前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
7月前
|
前端开发
(最简单)使用 reset-css 初始化浏览器css样式
(最简单)使用 reset-css 初始化浏览器css样式
276 1
|
JavaScript 前端开发
js内联外联样式的获取,父页面获取iframe框架元素返回null
js内联外联样式的获取,父页面获取iframe框架元素返回null
|
前端开发 JavaScript API
Vue2.js:前端在浏览器中网页表格打印的实现方案:window.print、print-js、iframe
Vue2.js:前端在浏览器中网页表格打印的实现方案:window.print、print-js、iframe
633 0
Vue2.js:前端在浏览器中网页表格打印的实现方案:window.print、print-js、iframe
|
JavaScript
JS:NProgress浏览器顶部进度条
JS:NProgress浏览器顶部进度条
108 0
|
JavaScript 容器
js原生滚动与使用插件better-scroll不起作用原因
js原生滚动与使用插件better-scroll不起作用原因
307 0