首页
所有分类
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 相关文章推荐
JQuery从头学起第三讲
Jul 06 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
77A(2) 音箱(1) 摩托罗拉(1) MOTOROLA(1) 单管机(1) ICF-2010(1) 晶体管(2) 收信机(3) BOSE(2) 耳机(1)
You might like
php的控制语句
2006/10/09 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
深入php多态的实现详解
2013/06/09 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JS实现表单验证功能(验证手机号是否存在，验证码倒计时)
2016/10/11 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
python追加元素到列表的方法
2015/07/28 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python查看模块安装位置的方法
2018/10/16 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
职务说明书范文
2014/05/07 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
会计工作态度自我评价
2015/03/06 职场文书
中英文求职信范文
2015/03/19 职场文书
2016年员工年度考核评语
2015/12/02 职场文书