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 相关文章推荐
popdiv
Jul 14 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 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
You might like
php中的常用魔术方法汇总
2016/02/14 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
详解ES6中的let命令
2020/04/05 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Python实时获取cmd的输出
2015/12/13 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
施工材料员岗位职责
2014/02/12 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
骨干教师事迹材料
2014/12/17 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
欧元符号 €
2022/02/17 杂记