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.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】
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制作窗口:(本节忽略) ...
随机推荐
- Dcoker 部署Tomcat+redis+war
1.首先安装redis docker run –name my-redis -d redis 2.安装tomcat并启动 docker run -p 8383:8383 –name tomcat -v ...
- D. Almost All Divisors
We guessed some integer number xx. You are given a list of almost all its divisors. Almost all means ...
- 用logstash 作数据的聚合统计
用logstash 作数据的聚合统计 以spark-streaming 处理消费数据,统计日志经spark sql存储在mysql中 日志写入方式为append val wordsDataFrame ...
- iOS漂亮的Toolbar动画、仿美团主页、简易笔记本、流失布局、标签分组等源码
iOS精选源码 JPLiquidLayout 简单易用的流式布局 labelGroupAndStreamSwift---标签分组,单选,多选 iOS采用UITableView和UIScrollView ...
- 将java list转换为js的数组
var data = new Array();<%ArrayList list = new ArrayList();list.add(0);list.add(1);if(list!=null){ ...
- 62）PHP，提示跳转
由于就是一个普通的页面展示,提示的样式,可以轻松定制! 语法: Header()后的代码会执行,因此在处理好跳转相关操作后,脚本也应该被DIE掉! 案例中实现跳转 封装一个可以完成跳转的方法,需要时, ...
- UFT检查点
一.标准检查点 选择需要插入检查点的语句,点击右键,选择Insert Standard Checkpoint.... 二.图像检查点(Insert Standard Checkpoint....) 在 ...
- Sampling Error|Sampling mean|population mean
7.1 Sampling Error; the Need for Sampling Distributions 样本均值的三种表达: Sampling distribution of the samp ...
- 数据库引擎MyiSAM和InnoDB区别
数据库操作原理归根到底还是对文件操作,只不过是数据库文件. MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三 ...
- LeetCode Day 13
LeetCode0026 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空 ...