首页
所有分类
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 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
Bootstrap每天必学之弹出框（Popover）插件
Apr 25 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
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
Oracle面试题(81) 网络工程师面试题(96) DB面试题(126) C#面试题(90) 软件测试工程师面试题(53) Android面试题(6) LINUX面试题(83) 软件工程师面试题(40) .NET面试题(131) EJB面试题(46)
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP新手上路（二）
2006/10/09 PHP
php flv视频时间获取函数
2010/06/29 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Python字典操作简明总结
2015/04/13 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
入党积极分子思想汇报范文
2014/01/05 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
2014年会策划方案
2014/05/11 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android