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.returnvalue

window.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】

window.showModalDialog与window.open()使用的更多相关文章

  1. window.open、window.showModalDialog和window.showModelessDialog 的区别[转]

    一.前言 要打开一个可以载入页面的子窗口有三种方法,分别是window.open.window.showModalDialog和window.showModelessDialog. open方法就是打 ...

  2. window.showModalDialog 与window.open传递参数的不同？

    简单的说,就是一个在弹出窗口之后可以做其它的事,即window.open 另一个在弹出窗口之后不能做其它的事,只能是关闭了当前的窗口之后才能做其它的事,即window.showModalDialog ...

  3. window.showModalDialog以及window.open用法简介

    .可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象.例如:------------------------------parent.htm<script& ...

  4. JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    一.Iframe 篇 公共部分 //父对象得到子窗口的值 //ObjectID是窗口标识,ContentID是元素ID function GetValue(ObjectID,ContentID) { ...

  5. 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    一.Iframe 篇 //&&&&&&&&&&&&&&&&&&a ...

  6. window.open || window.showModalDialog || window.showModelessDialog

    http://dwcmayday201204063551.iteye.com/blog/1621751 http://www.cnblogs.com/zhangyi85/archive/2009/09 ...

  7. window.showModalDialog

    //新版本谷歌没有window.showModalDialog,创建一个window.openif(window.showModalDialog == undefined){  window.show ...

  8. 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...

  9. javascript window.showModalDialog不兼容goole解决方案

    window.showModalDialog不兼容goole解决方案 一.弹框方案: 1.window.open; 2.window.showModalDialog; 3.div制作窗口:(本节忽略) ...

随机推荐

  1. Tomcat下访问HTML页面乱码的解决方法

    问题:在 Tomcat 服务器中访问 HTML 静态页面出现中文乱码,html 页面即使 charset 设置成 UTF-8 也会是乱码,打开浏览器的开发者工具发现 response 的请求头中的 C ...

  2. SEERC 2018 Inversion

    题意: 如果p数组中 下标i<j且pi>pj 那么点i j之间存在一条边 现在已经知道边,然后求p数组 在一张图中,求有多少个点集,使得这个点集里面的任意两点没有边 不在点集里面的点至少有 ...

  3. 怎么保证RabbitMQ和kafuka集群的高可用性？

    rabbitMQ有三种模式:单机模式,普通集群模式,镜像集群模式 RabbitMQ的高可用性   RabbitMQ是比较有代表性的,因为是基于主从做高可用性的,我们就以他为例子讲解第一种MQ的高可用性 ...

  4. 堆排Heap Sort

    1. #define LeftChild(i) (2*(i)+1) void PercDown(vector<int>&num, int i, int n) { int child ...

  5. 《运筹学基础及应用》习题1.1(b),1.1(c),1.2(a)

    用图解法求解下列线性规划问题,并指出问题具有惟一最优解,无穷多最优解,无界解还是无可行解. 习题1.1(b):$\max z=3x_1+2x_2$$$s.t\begin{cases}  2x_1+x_ ...

  6. [LC] 107. Binary Tree Level Order Traversal II

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  7. prototype与__proto__

    __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! 使用Object.getPrototypeOf()代替__proto__!!! 一.prototype 几乎所 ...

  8. [LC] 32. Longest Valid Parentheses

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...

  9. highcharts 柱状图在柱子顶部显示y轴数据

    var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...

  10. 前后端分离，使用nginx解决跨域问题

    前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码 ...