首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript showModalDialog模态对话框使用说明

Posted in Javascript onDecember 31, 2009

1. 标准的方法 

<script type="text/javascript"> 
function openWin(src, width, height, showScroll){ 
window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+";scroll:"+showScroll+";"); 
} 
</script>

例：<span style="CURSOR: pointer" onclick="openWin'https://3water.com', '500px', '400px', 'no')">点击</span>

2. 要注意的是，Firefox并不支持该功能，它支持的语法是 

window.open 
('openwin.html','newWin', 'modal=yes, width=200,height=200,resizable=no, scrollbars=no' );

3. 如何自动判断浏览器 
<input type="button" value="打开对话框" onclick="showDialog('#')"/> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function showDialog(url) 
{ 
if( document.all ) //IE 
{ 
feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no"; 
window.showModalDialog(url,null,feature); 
} 
else 
{ 
//modelessDialog可以将modal换成dialog=yes 
feature ="width=300,height=200,menubar=no,toolbar=no,location=no,"; 
feature+="scrollbars=no,status=no,modal=yes"; 
window.open(url,null,feature); 
} 
} 
//--> 
</SCRIPT>

4. 在IE中，模态对话框会隐藏地址栏，而在其他浏览器则不一定

javascript showModalDialog模态对话框使用说明

javascript showModalDialog模态对话框使用说明

【注意】在谷歌浏览器中，这个模态的效果也会失效。

5. 一般在弹出对话框的时候，我们都希望整个父页面的背景变为一个半透明的颜色，让用户看到后面是不可以访问的

 javascript showModalDialog模态对话框使用说明

而关闭对话框之后又希望还原

 javascript showModalDialog模态对话框使用说明

这是怎么做到的呢？ 

///显示某个订单的详细信息，通过一个模态对话框，而且屏幕会变颜色 
function ShowOrderDetails(orderId) { 
var url = "details.aspx?orderID=" + orderId; 
//$("body").css("filter", "Alpha(Opacity=20)"); 
//filter:Alpha(Opacity=50) 
$("body").addClass("body1"); 
ShowDetailsDialog(url, "600px", "400px", "yes"); 
$("body").removeClass("body1"); 
}

另外，有一个样式表定义 
.body1 
{ 
background-color:#999999; 
filter:Alpha(Opacity=40); 
}

6. 如何在页面之间传递数值
showModalDialog 传值及刷新
(一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口.
farther.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>New Document </TITLE> 
<META content="EditPlus" name="Generator"> 
<META content="" name="Author"> 
<META content="" name="Keywords"> 
<META content="" name="Description"> 
<script language="javascript"> 
<!-- 
function openChild(){ 
var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px"); 
if(k != null) 
document.getElementById("txt11").value = k; 
} 
//--> 
</script> 
</HEAD> 
<BODY> 
<FONT face="宋体"></FONT> 
<br> 
传递到父窗口的值:<input id="txt9" type="text" value="3333333333333" name="txt9"><br> 
返回的值:<input id="txt11" type="text" name="txt11"><br> 
子窗口设置的值:<input id="txt10" type="text" name="txt10"><br> 
<input id="Button1" onclick="openChild()" type="button" value="openChild" name="Button1"> 
</BODY> 
</HTML>

child.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>New Document </TITLE> 
<META content="EditPlus" name="Generator"> 
<META content="" name="Author"> 
<META content="" name="Keywords"> 
<META content="" name="Description"> 
<meta http-equiv="Expires" content="0"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Pragma" content="no-cache"> 
</HEAD> 
<BODY> 
<FONT face="宋体"></FONT> 
<br> 
父窗口传递来的值:<input id="txt0" type="text" name="txt0"><br> 
输入要设置父窗口的值:<input id="txt1" type="text" name="txt1"><input id="Button1" onclick="setFather()" type="button" value="设置父窗口的值" name="Button1"><br> 
输入返回的值:<input id="txt2" type="text" name="txt2"><input id="Button2" onclick="retrunValue()" type="button" value="关闭切返回值" name="Button2"> 
<input id="Button3" onclick="" type="button" value="关闭刷新父窗口" name="Button3"> 
<script language="javascript"> 
<!-- 
var k=window.dialogArguments; 
//获得父窗口传递来的值 
if(k!=null) 
{ 
document.getElementById("txt0").value = k.document.getElementById("txt9").value; 
} 
//设置父窗口的值 
function setFather() 
{ 
k.document.getElementById("txt10").value = document.getElementById("txt1").value 
} 
//设置返回到父窗口的值 
function retrunValue() 
{ 
var s = document.getElementById("txt2").value; 
window.returnValue=s; 
window.close(); 
} 
//--> 
</script> 
</BODY> 
</HTML>

说明:
由于showModalDialog缓存严重,下面是在子窗口取消客户端缓存的设置.也可以在服务器端取消缓存,参考:
http://adandelion.cnblogs.com/articles/252137.html
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
二)下面是关闭刷新父窗口的例子
farther.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="javascript"> 
<!-- 
function openChild() 
{ 
var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px"); 
if(k == 1)//判断是否刷新 
{ 
alert('刷新'); 
window.location.reload(); 
} 
} 
//--> 
</script> 
</HEAD> 
<BODY> 
<br> 
传递到父窗口的值:<input id="txt9" type="text" value="3333333333333" NAME="txt9"><br> 
<input type="button" value="openChild" onclick="openChild()" ID="Button1" NAME="Button1"> 
</BODY> 
</HTML>

child.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>New Document </TITLE> 
<META content="EditPlus" name="Generator"> 
<META content="" name="Author"> 
<META content="" name="Keywords"> 
<META content="" name="Description"> 
<meta http-equiv="Expires" content="0"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Pragma" content="no-cache"> 
</HEAD> 
<BODY> 
<FONT face="宋体"></FONT> 
<br> 
父窗口传递来的值:<input id="txt0" type="text" name="txt0"><br> 
<input id="Button1" onclick="winClose(1)" type="button" value="关闭刷新父窗口" name="Button1"> 
<input id="Button2" onclick="winClose(0)" type="button" value="关闭不刷新父窗口" name="Button2"> 
<script language="javascript"> 
<!-- 
var k=window.dialogArguments; 
//获得父窗口传递来的值 
if(k!=null) 
{ 
document.getElementById("txt0").value = k.document.getElementById("txt9").value; 
} 
//关闭窗口返回是否刷新的参数. 
function winClose(isRefrash) 
{ 
window.returnValue=isRefrash; 
window.close(); 
} 
//--> 
</script> 
</BODY> 
</HTML>

说明
1.下面是取消客户端缓存的:
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
也可以在服务器端取消缓存,参考:
http://adandelion.cnblogs.com/articles/252137.html
2.向父窗口传递阐述在ASP.NET中也可以是用aaa.aspx?id=1的方式传递.
3.不刷新父窗口的话在父窗口中直接这样一来设置可以.
<script>
window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
</script>
4.在子窗口中若要提交页面的话要加入:,这样就不会打开新窗口了.
<head>
<base target="_self">
</HEAD>

javascript showModalDialog模态对话框使用说明

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jquery实现用户打分评分特效
May 28 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
javascript控制frame,iframe的src属性代码
Dec 31 #Javascript
让IE8支持DOM 2（不用框架！）
Dec 31 #Javascript
javascript 获取表单file全路径
Dec 31 #Javascript
JavaScript 模拟用户单击事件
Dec 31 #Javascript
js监听表单value的修改同步问题，跨浏览器支持
Dec 31 #Javascript
js跟随滚动条滚动浮动代码
Dec 31 #Javascript
Javascript的匿名函数小结
Dec 31 #Javascript
GPU(1) HBuilder(1) delete in(1) 查询效率(1) Three.js(1) kubernetes(1) 条形码(1) 分布式追踪(1) group by(1) Express(1)
You might like
php模板函数 正则实现代码
2012/10/15 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
javascript eval函数深入认识
2009/02/21 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
jQuery实现贪吃蛇小游戏（附源码下载）
2017/03/04 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
node.js通过url读取文件
2020/10/16 Javascript
新手该如何学python怎么学好python？
2008/10/07 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python语言描述最大连续子序列和
2017/12/05 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python类的实例化问题解决
2019/08/31 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
python语言是免费还是收费的？
2020/06/15 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
巴西购物网站：Estrela10
2018/12/13 全球购物
Opodo意大利：欧洲市场上领先的在线旅行社
2019/10/24 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
静心口服夜广告词
2014/03/20 职场文书
就业协议书样本
2014/08/20 职场文书
银行贷款委托书范本
2014/10/11 职场文书
悬空寺导游词
2015/02/05 职场文书
新员工入职感言范文！
2019/07/04 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
python实现双向链表原理
2022/05/25 Python