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 相关文章推荐
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
小程序云开发实战小结
Oct 25 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
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
一个用于MySQL的PHP XML类
2006/10/09 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php使用session二维数组实例
2014/11/06 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
vue内置指令详解
2018/04/03 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python随机取list中的元素方法
2018/04/08 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
兼职学生的自我评价
2013/11/24 职场文书
护士实习求职信
2014/06/22 职场文书
民事诉讼代理词
2015/05/25 职场文书
乱世佳人观后感
2015/06/08 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
python基础之模块的导入
2021/10/24 Python