window.showModalDialog 有些浏览器不兼容，尝试用window.open() 封装替代，需要打开子窗口后向父窗口传递数据。
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<head></head>
<title>Test dialog</title>
<input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>
<script>
//选择
function select_Dialog(){
var returnRes=Dialog('layer.html','window',800,600);
/*
if(returnRes)
{
var returnArr=returnRes.split("+");
document.getElementById('kh_id').value=returnArr[0];
document.getElementById('kh_id_txt').value=returnArr[1];
document.getElementById('zk').value=returnArr[2];
}
*/
}
function modalDialog(url, name, width, height){
if (width == undefined){
width = 400;
}
if (height == undefined){
height = 300;
}
if (window.showModalDialog){
window.open(url,name, 'width=' + (width) + 'px; height=' + (height) + 'px; edge:raised;resizable:yes;scroll:yes;status:no;center:yes;help:no;minimize:yes;maximize:yes;');
}else{
x = (window.screen.width - width) / 2;
y = (window.screen.height - height) / 2;
window.open(url, name, 'height='+height+', width='+width+', left='+x+', top='+y+', toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
}
}
function Dialog(url,name,width,height)
{
// 测试
// return showModalDialog(url, name, 'dialogWidth:'+w+'px; dialogHeight:'+h+'px; help: no; scroll: yes; status: no');
//
if (window.showModalDialog)
{
window.open(url,name, 'width=' + (width) + 'px; height=' + (height) + 'px; edge:raised;resizable:yes;scroll:yes;status:no;center:yes;help:no;minimize:yes;maximize:yes;');
}
else
{
x = (window.screen.width - width) / 2;
y = (window.screen.height - height) / 2;
window.open(url, name, 'height='+height+', width='+width+', left='+x+', top='+y+', toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
}
}
</script>
</html>子窗口返回数据：
window.returnvaluewindow.open 代替showModalDialog
页面A.htm 用 window.open方式弹出页面 B.htm 。
在页面B.htm上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口A.htm。
A.htm得到返回的值后，给本页面上的文本框赋值。
A.html
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<head></head>
<title>Test dialog</title>
<form name="form1" action="">
<input name="feild1" id='field1'>
<input name="feild2">
</form>
<input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>
<script>
function select_Dialog(){
var height = 300;
var width = 500;
var url = "B.html";
var winOption = "height=" + height + ",width=" + width + ",top=50,left=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,fullscreen=0";
window.open(url, window, winOption);
}
function sele(NO){ //NO为返回值
var re= new Array();//如果需返回多个变量，则采用数组把各个变量分开
re=NO.split(",");
$("input[name='feild1']").val(re[0]);
$("input[name='feild2']").val(re[1]);
}
</script>
</html>B.html
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<head></head>
<title>B </title>
<input type="button" value="返回值" onclick="re('Hello,hahah')">
<script>
function re(NOre){
var NOre = "5,6";
// 在B页面调用 A页面方法
window.opener.sele(NOre);
// 或者直接在子页面给父页面赋值
// window.opener.document.getElementById("field1").value=name;
window.close();
}
</script>
</html>另外一个封装方法
modal.js
var has_showModalDialog = !!window.showModalDialog;//定义一个全局变量判定是否有原生showModalDialog方法
if(!has_showModalDialog &&!!(window.opener)){
window.onbeforeunload=function(){
window.opener.hasOpenWindow = false; //弹窗关闭时告诉opener：它子窗口已经关闭
}
}
//定义window.showModalDialog如果它不存在
if(window.showModalDialog == undefined){
window.showModalDialog = function(url,mixedVar,features){
if(window.hasOpenWindow){
alert("您已经打开了一个窗口！请先处理它");//避免多次点击会弹出多个窗口
window.myNewWindow.focus();
}
window.hasOpenWindow = true;
if(mixedVar) var mixedVar = mixedVar;
//因window.showmodaldialog 与 window.open 参数不一样，所以封装的时候用正则去格式化一下参数
if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
//window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no");
//window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
var left = (window.screen.width - parseInt(features.match(/width[\s]*=[\s]*([\d]+)/i)[1]))/2;
var top = (window.screen.height - parseInt(features.match(/height[\s]*=[\s]*([\d]+)/i)[1]))/2;
window.myNewWindow = window.open(url,"_blank",features);
}
}A.html 父页面
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./modal/modal.js"></script>
<head>
<meta charset="utf-8">
</head>
<title>Test dialog</title>
<div id="content"> 内容哈哈哈 </div>
<input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>
<script>
function select_Dialog(){
url = "B.html";
var hotelIdList = window.showModalDialog(url, "hotel", "dialogWidth:1020px;dialogHeight:500px;help:no;resizable:no;center:yes;scroll:yes;status:no");
if(!has_showModalDialog) return;//chrome 返回 因为showModalDialog是阻塞的 open不一样;
$("#content").append(hotelIdList);
}
function selectHotelChrome(option){//为打开的窗口定义方法，让打开的窗口关闭时通过window.opener赋值回来并执行
$("#content").append(option);
}
</script>
</html>B.html页面：
<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
</head>
<title>B </title>
<input type="button" value="返回值" onclick="chooseHotels('Test modal pop')">
<script>
function chooseHotels(msg) {
/*
*省略了自己的业务.......
*/
var contentIds = msg;
if (window.opener != undefined) { //forchrome
window.opener.selectHotelChrome(contentIds); //关闭前调用父窗口方法
}
else {
window.returnValue = contentIds;
}
window.close();
}
</script>
</html>相关文章：
高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】
