js showModalDialog弹出窗口实例详解

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 }
 ［ＩＥ５＋］：是否可被改变大小。默认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()"/>

赞 (0)

相关推荐

  • 关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

    最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法.在CSS中加入以下代码 CSS body { padding-right: 0px !important } .modal-open { overflow-y: auto; } PS:bootstrap datepicker 在bootstrap modal中不显示问题 可以通过在 input 输入框之外 嵌套 <span style="posit

  • jQuery+jqmodal弹出窗口实现代码分明

    jQuery+jqmodal弹出窗口实现代码分明

    先上图,最终效果如下 点击"信息确认" 就是弹出一个确认窗口,把已经填报的信息都放到里面看看. 信息放里面很简答,主要是弹出窗口要做得好看点. 所以选择了jQuery+jqmodal实现 实现方法如下1.页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的. 2.建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none.高度和宽度要设置好,挡住下

  • 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

    js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hide

  • 弹出模态框modal的实现方法及实例

    弹出模态框modal的实现方法及实例 一个简单的点击列表修改按钮,弹出bootstrap模态框,修改状态传到后台php <a href="" data-toggle=" rel="external nofollow" rel="external nofollow" modal" data-target="#myModal" class="btn btn-success btn-sm edit

  • bootstrap modal弹出框的垂直居中

    bootstrap modal弹出框的垂直居中

    本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟"坑",无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之. 最先就是百度咯,方法,就是修改源码 that.$element.children().eq(0).css("position", "absolute").css({ "margin":"0px", "top": functio

  • 解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    废话不多说了直接给大家贴代码了,具体代码如下所示: $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); //显示modal $('#myModal').modal('show'); //show完毕前执行 $('#myModal').on('shown', function () { //加上下面这句!解决了~ $(document).off('focusin.modal'); // 打开Dia

  • bootstrap modal+gridview实现弹出框效果

    bootstrap modal+gridview实现弹出框效果

    项目需要在gridview的表单信息中点击更新,弹出表单进行操作,不需要跳转. 1.在girdview中加入更新操作按钮用来调用modal弹窗 'buttons' => [ 'update' => function ($url, $model, $key) { return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [ 'data-toggle' => 'm

  • js showModalDialog弹出窗口实例详解

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

  • Android中webview与JS交互、互调方法实例详解

    Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这

  • JS前端实现fsm有限状态机实例详解

    目录 引言 举个栗子 从零开始 获取状态 状态改变 transition 实现fsm状态机 实现钩子函数 完整代码 总结 引言 我们平时开发时本质上就时对应用程序的各种状态进行切换并作出相应处理,最直接的方法就是添加标志位然后考虑所有可能出现的边界问题,通过if...else if...else 来对当前状态进行判断从而达成页面的交互效果, 但随着业务需求的增加各种状态也会随之增多,我们就不得不再次修改if...else代码或者增加对应的判断,最终使得程序的可读性.扩展性.维护性变得很麻烦 有限

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>

  • JS JSOP跨域请求实例详解

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • jQuery.datatables.js插件用法及api实例详解

    jQuery.datatables.js插件用法及api实例详解

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "

  • 微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag

  • JS三级联动代码格式实例详解

    这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现js多级联动的代码格式 <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </h

随机推荐