您的位置：首页 > Web前端 > JavaScript

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

2012-08-28 22:40 357 查看

浏览器居中以及传参实例

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 兼容 window.showModalDial

相关文章推荐

新的分享

章节导航