js showModalDialog弹出窗口实例详解


Posted in Javascript onJanuary 07, 2014

showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.

使用方法: 
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 

参数说明: 
sURL-- 
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。 

vArguments-- 
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 

sFeatures-- 
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。 

1.dialogHeight :
  对话框高度,不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。 

2.dialogWidth: 
  对话框宽度。 

3.dialogLeft:
  离屏幕左的距离。 

4.dialogTop:
  离屏幕上的距离。 

5.center: {yes | no | 1 | 0 }:
  窗口是否居中,默认yes,但仍可以指定高度和宽度。 

6.help: {yes | no | 1 | 0 }:
  是否显示帮助按钮,默认yes。 

7.resizable: {yes | no | 1 | 0 }
 [IE5+]:是否可被改变大小。默认no。 

8.status: {yes | no | 1 | 0 }
 [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 

9.scroll:{ yes | no | 1 | 0 | on | off }:
  指明对话框是否显示滚动条。默认为yes。 
下面几个属性是用在HTA中的,在一般的网页中一般不使用。 

10.dialogHide:{ yes | no | 1 | 0 | on | off }:
  在打印或者打印预览时对话框是否隐藏。默认为no。 

11.edge:{ sunken | raised }:
指明对话框的边框样式。默认为raised。 

12.unadorned:{ yes | no | 1 | 0 | on | off }:
  默认为no。

FOR example:
parent.html

<script>
function setname(res){
document.getElementByIdx_x("name").value=res;
}
function selectTp(){
 //把父窗口的setname函数传给子窗口window.showModalDialog('child.html',setname,'dialogWitdh:300px;dialogHeight:300px;center:yes;');
}
</script>
<input type="button" value="提交" onclick="selectTp()"/>
<input type="text" id="name" name='name'/>
child.html
 <SCRIPT LANGUAGE="JavaScript">
  <!--
 function setName(){
  var win="";
  if(window.dialogArguments!=null)
  {
//子窗口获取父窗口的setname函数,并操作赋值
 win=window.dialogArguments;
 win('Jone');
  }
  this.close();
  }
  //-->
  </SCRIPT>
  <input type="button" value="给父窗口赋值" onclick="setName()"/>
Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
详解vue组件中使用路由方法
Feb 12 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 #Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 #Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 #Javascript
asp.net刷新本页面的六种方法总结
Jan 07 #Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 #Javascript
js如何获取兄弟、父类等节点
Jan 06 #Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 #Javascript
You might like
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
第五章 php数组操作
2011/12/30 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Python入门篇之条件、循环
2014/10/17 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
浅析python函数式编程
2020/09/26 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
爱心活动计划书
2014/04/26 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
2015年科普工作总结
2015/07/23 职场文书
中学校园广播稿
2015/08/18 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
在 Python 中利用 Pool 进行多线程
2022/04/24 Python