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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
Vue.js watch监视属性知识点总结
Nov 11 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
PHP7新特性简述
2017/06/11 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python实现自动发送报警监控邮件
2018/06/21 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python将数组n等分的实例
2019/12/02 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python切割图片的示例
2020/11/12 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
出纳员岗位职责风险
2014/03/06 职场文书
2014年高考决心书
2014/03/11 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
食品销售计划书
2014/04/26 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
nginx搭建NFS网络文件系统
2022/04/14 Servers