299
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 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對其支持難免有些不足。
最後更新：2017-04-02 16:48:16