window.showModalDialog与window.open()使用

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>

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

window.open、window.showModalDialog和window.showModelessDialog 的区别[转]
一.前言要打开一个可以载入页面的子窗口有三种方法,分别是window.open.window.showModalDialog和window.showModelessDialog. open方法就是打 ...
window.showModalDialog 与window.open传递参数的不同？
简单的说,就是一个在弹出窗口之后可以做其它的事,即window.open 另一个在弹出窗口之后不能做其它的事,只能是关闭了当前的窗口之后才能做其它的事,即window.showModalDialog ...
window.showModalDialog以及window.open用法简介
.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象.例如:------------------------------parent.htm<script& ...
JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
一.Iframe 篇公共部分 //父对象得到子窗口的值 //ObjectID是窗口标识,ContentID是元素ID function GetValue(ObjectID,ContentID) { ...
总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
一.Iframe 篇 //&&&&&&&&&&&&&&&&&&a ...
window.open || window.showModalDialog || window.showModelessDialog
http://dwcmayday201204063551.iteye.com/blog/1621751 http://www.cnblogs.com/zhangyi85/archive/2009/09 ...
window.showModalDialog
//新版本谷歌没有window.showModalDialog,创建一个window.openif(window.showModalDialog == undefined){ window.show ...
总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...
javascript window.showModalDialog不兼容goole解决方案
window.showModalDialog不兼容goole解决方案一.弹框方案: 1.window.open; 2.window.showModalDialog; 3.div制作窗口:(本节忽略) ...

随机推荐

SAP PM：参考维护工单创建测量凭证
(1)使用FM:CO_BC_ORDER_POST获取工单资料(Aufnr, aufpo and materials etc): (2)使用FM:MEASUREM_DOCUM_RFC_SINGLE_00 ...
有几张高度不一样的小图片，如何用html+css实现在同一行垂直居中对齐？
方法一 :使用弹性布局方法二 :CSS3 transform 属性父级元素定位子集元素加属性: position: absolute; top: 50%; transform: translat ...
分辨率与px的关系
此篇文章的目的用于打印套打的位置计算,顺便科普下知识: 1寸=2.54厘米 14寸=355.6毫米 15.6寸=39.624厘米=396.24毫米: 21寸=533.4毫米 21.7寸=551.18毫 ...
点分治练习——BZOJ 2152
做的第二道点分治的题目,比较裸,算是模板题吧(感觉比之前那题还简单点. 题目:BZOJ 2152 聪聪可可题目大意:给出一棵树,求树上两点间长度为3的倍数(0也算)的路径数. 解题思路: 基本和PO ...
Leaflet，OpenLayers3加载ArcGIS切片（png格式，Exploded松散型）
需求做了一个简单的WebGIS应用,不想因为加载切片就安装一台GIS服务器.于是想直接访问图片的方式来加载地图. 需解决的问题 leafletjs目前是不能够直接加载ArcGIS服务切片的,但可以借 ...
[LC] 169. Majority Element
Given an array of size n, find the majority element. The majority element is the element that appear ...
PP图|QQ图|正态性检验|K-S检验|S-W检验|
应用统计学: 物理条件一致时,有理由认为方差是一致的.配对检验可排除物理影响,使方差变小,但是自由度降低了,即样本数变小.二项分布均值假设检验的模型要依据前面的假设条件: PP图统计图要看中间的贴近情 ...
abrupt|promising
N-VAR 典礼;(宗教)仪式A ritual is a religious service or other ceremony which involves a series of actions ...
使用记事本编写html代码并运行
在使用记事本编写html代码,运行时需要将其.txt后缀改为.html双击运行即可. 有时电脑会默认的隐藏其后缀,这时需要修改一下. win7系统修改方法: 双击我的电脑: 选择组织: 选择 ...
Linux 下centos7启动 Tomcat 抛出Can't connect to X11 window server 问题的解决方法
1 问题今天启动 Tomcat 后,登录页验证码不见了.在 localhost.xxx.log 发现以下错误: org.apache.catalina.core.StandardWrapperVal ...

window.showModalDialog与window.open()使用

window.open 代替showModalDialog

另外一个封装方法

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

随机推荐

热门专题