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制作窗口:(本节忽略) ...
随机推荐
- sequelize 应用hook 实现对分表的访问
https://github.com/cclient/sequelize-shardinghttps://www.npmjs.com/package/sequelize-sharding 实际有效的代 ...
- SpringBoot 将自制的Starter 发布到远程公服
上一篇文章:就是简单的介绍了如何自己制作一个starter ,由于上篇文章只是我个人的笔记,就是将其中重要的部分写出来了,少了其他的基础步骤,但是这个我自己就能看懂,也算不上是一篇好的博客,只能算是笔 ...
- iOS自定义弹出视图、收音机APP、图片涂鸦、加载刷新、文件缓存等源码
iOS精选源码 一款优秀的 聆听夜空FM 源码 zhPopupController 简单快捷弹出自定义视图 WHStoryMaker搭建美图(贴纸,涂鸦,文字,滤镜) iOS cell高度自适应 有加 ...
- 如何回收VCSA 6自带的vPostgres数据库空间
最近有学生连续反应由于VCSA磁盘空间满了,导致服务无法正常启动,寻求压缩数据库空间的问题.首先说下,VCSA的数据库是没办法图形界面管理的, 它的内置vPostgres数据库的管理只能通过命令行来完 ...
- 一：MYsql登录，服务开启和停止
字段的属性: 1:名称 2:数据类型 3:长度 4:约束 SQL的分类:(结构化查询语言) 1:数据查询语言DQL select 2:数据操纵语言DML insert delete u ...
- Pytorch中的variable, tensor与numpy相互转化的方法
1.将numpy矩阵转换为Tensor张量 sub_ts = torch.from_numpy(sub_img) #sub_img为numpy类型 2.将Tensor张量转化为numpy矩阵 sub_ ...
- tmux的基本用法
tmux的基本用法: tmux #启动 C-b d #挂起,效果如同screen中的C-a d tmux attach #恢复会话,效果如同screen中的screen -r 更多功能(需要在tmux ...
- 牛客-小y的盒子
题目传送门 -------------------稍加观察就会发现,4n - 1就是题目要的答案.至于为什么,看官方的题解.不过这个n非常的大,用正常快速幂解决不了.这道题我学到的就是解决幂非常大的情 ...
- HTTP请求方法及常见状态码
GET: 请求指定的页面信息,并返回实体主体. HEAD: 只请求页面的首部. POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体. PUT: 从客户端向服务器传送的数据取代指定 ...
- [LC] 11. Container With Most Water
Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...