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制作窗口:(本节忽略) ...

随机推荐

winform 界面加载慢原因分析
公司新来的开发人员,对winform开发还不是特别精通,在做个性化界面体验的时候容易出现闪烁和加载慢闪烁的话,通过winform窗体的双缓存来解决在form 窗体中增加如下代码 protected ...
jQuery - textarea 自适应内容高度
<textarea id="textarea"></textarea> <script> function makeExpandingArea( ...
open 管道用法|Getopt::Long
#!/usr/bin/perl use strict; use warnings; use Getopt::Long; my ($number,$in,$out); GetOptions( " ...
IDEA Maven项目中添加tomcat没有无artifact选项
IntelliJ使用 ##使用IntelliJ IDEA配置web项目时,选择Edit Configration部署Tomcat的Deployment可能会出现以下情况: 导致新手部署过程中摸不着头脑 ...
Fiddler发送get post测试笔记
0 环境系统环境:win7 1 操作 1 post 类似 2 get
github傻瓜的食用方法
配置Git 首先在本地创建ssh key: 1 $ ssh-keygen -t rsa -C "your_email@youremail.com" 后面的your_email@yo ...
[2015普及组-D]推销员思维que
题:https://www.cometoj.com/problem/0221 #include<iostream> #include<cstring> #include< ...
机器学习算法之——KNN、Kmeans
一.Kmeans算法 kmeans算法又名k均值算法.其算法思想大致为:先从样本集中随机选取 kk 个样本作为簇中心,并计算所有样本与这 kk 个“簇中心”的距离,对于每一个样本,将其划分到与其距离最 ...
Invalid action class configuration that references an unknown class问题原因之s:select
早先做个练习项目就出现了这个错误,各种查资料,然后各种尝试,依然没有解决,不过可以确定是前台页面导致的. 今天又碰到了这个问题,头疼啊!不能再略过了,使用最笨的方法,一个模块一个模块的排除.先看下我的 ...
1 jquery对checkbox的简单操作
//全选和全不选 votefunction selectAll(){ if($(":checkbox").prop('checked')){ //$(":chec ...

window.showModalDialog与window.open()使用

window.open 代替showModalDialog

另外一个封装方法

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

随机推荐

热门专题