首页
所有分类
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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
javascript字符串函数汇总
Dec 06 Javascript
微信公众平台开发教程（五）详解自定义菜单
Dec 02 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
React组件生命周期详解
Jul 03 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 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
Geospatial(1) plus.io(1) 入门基础(1) Vmware(3) RabbitMQ(3) 虚拟机(3) Hash(1) 磁盘管理(1) 触发器(3) html5+(1)
You might like
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
PHP设计模式之外观模式（Facade）入门与应用详解
2019/12/13 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python数据类型详解（二）列表
2016/05/08 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python高阶爬虫实战分析
2018/07/29 Python
python sorted方法和列表使用解析
2019/11/18 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python生成任意频率正弦波方式
2020/02/25 Python
为什么说python更适合树莓派编程
2020/07/20 Python
会计专业求职信范文
2014/03/16 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
财务整改报告范文
2014/11/05 职场文书
办公室文员岗位职责
2015/02/04 职场文书
教师工作决心书
2015/02/04 职场文书
网络安全倡议书（3篇）
2019/09/18 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python