`

showModel的使用体会

    博客分类:
  • js
阅读更多

ShowModalDialog函数的功能:
打开一个子窗口,并且可与父窗口相互传递数据,它与window.open的最大区别就在于由ShowModalDialog打开子窗口后,父窗口将不能操作。
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
参数说明:
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
   dialogWidth: 对话框宽度。
   dialogLeft: 距离桌面左的距离。
   dialogTop: 离桌面上的距离。
   center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
   help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
   resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
   status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no [Modal]。
scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
参数传递方法:
父窗口向子窗口传递参数采用ShowModalDialog的第2个参数即可,父窗口要获取子窗口传回的参数则可通过ShowModalDialog函数的返回值获取。
子窗口获取父窗口参数的方法为采用子窗口window对象dialogArguments属性获取,例如:
var a=window.dialogArguments;
子窗口向父窗口返回参数采用window.returnValue属性,如:
window.returnValue=1;
window.close();

 

注意:使用ShowModalDialog打开的子窗口会存在一个问题,就是点击子窗口的按钮提交服务器时,不执行按钮事件,而是打开一个新的窗口。解决的办法如下:

在子窗口的<head>里加入如下内容既可避免出现上面的问题

<base target="_self" /><!--这句话非常重要,只要加上才能保证在弹出窗口中调用服务端代码而不会再弹出一个新窗口-->

 

 

使用体会

1.
        <base target="_self" />在IE7中无效的解决办法
通过ShowModalDialog 打开页面,在POSTBACK时,打开新的页面,
在IE6下没问题,只有在IE7下,会重新打开一新页面,

其实只要把<base target="_self"/>放到<head>下即可。
<head>
<base target="_self"/>
。。。。

而在IE6中位置没有限制。一定要求是放在<head>下面
关键字: _self, <base target=/> ie6.0 ie7.0
最近项目中一个小问题卡了我不少时间。我遇到的问题是:在项目的弹出式的模型窗口里,我需要将数据提交到服务器。然后从服务器再返回到本页面。结果:返回了本页面,窗口却是从新打开的。
  现在来谈一下解决方法:书上说在模型窗口中加入<base target="_self"/>标签即可。我把该标签放上去却没有任何反应,当时我不明白这为什么?后来经过查证原来这个属性有IE6与IE7之分。忘了说我的浏览器是IE7的。
注:
1、如果你是IE6,你将<base target="_self"/>加入到<head>标签里就可以了。
2、如果你是IE7,你必须将<base target="_self"/>加入到<head>的对口中位置。
代码示例:
<html>
<head>
<title>test</title>
<base target="_self"/>
.............
</head>
</html>
target 属性 -- 代表链接目标
取值
_blank -- 打开一个新窗体
_parent -- 在父窗体中打开
_self -- 在本页打开,此为默认值
_top -- 在上层窗体中打开
一个对应的框架页的名称 -- 在对应框架页中打开
此标记已经被w3c抛弃


showModel的调用
父页面代码:
     var ts = window.showModalDialog("<%=path%>"+"/adv/AdvRegisterAction.do?act=advList&cusName="+cusName+"&time="+new Date(),window,"dialogWidth:650px;dialogHeight:450px;center:yes;help:no;status:no;resizable:no");
     theForm.elements("registerDto.ads.cusId").value=ts[0];        //ts为返回值
     theForm.elements("registerDto.ads.contId").value=ts[1];
     theForm.elements("registerDto.ads.cusName").value=ts[2];

   打开的页面:
        function select(conId,cusId,cusName){
                    var ts = new Array();
                    ts[0]=cusId;
                    ts[1]=conId;
                    ts[2]=cusName;
                    window.returnValue = ts;
        window.close();
    }

  这样既可以再父主页面之间传递数据,不过这种形式在IE7.0中存在问题。
分享到:
评论

相关推荐

    Mrbayes中文使用说明

    用户可以使用 showmodel 命令来检查当前矩阵模型的设置。 通过本指南,用户可以快速了解如何使用 Mrbayes 构建系统进化树。MrBayes 是一款功能强大且灵活的软件,用户可以根据需要进行模型设置和参数调整,以获得...

    showModelDialog。js

    兼容ie和chrome的showModelDialog兼容ie和chrome的showModelDialog

    vue插件–仿微信小程序showModel实现模态提示窗功能

    效果图: 下面是源码: index.js import Vue from 'vue'; import model from './model.vue'; export default { install(Vue) { const defaults = { show: false, mask: true, ... cancelCallBack:

    vue插件--仿微信小程序showModel实现模态提示窗功能

    主要介绍了vue插件--仿微信小程序showModel实现模态提示窗,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    vue 实现一个简单的全局调用弹窗案例

    主要介绍了vue 实现一个简单的全局调用弹窗案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    微信小程序自定义模态弹窗插件

    最近在写微信小程序的时候用到了模态...使用方法也很简单,在要调用弹窗的位置使用this.showModel()方法,传入一些参数,就可以将弹窗显示出来。   this.showModel({ ModelId: 1, ModelTitle: '标题(2)', ModelCont

    uni-app 自定义组件展示html富文本内容,可实现富文本html内容中 图片展示、视频播放、音频播放。

    uni-app 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式后进行展示的自定义组件、可以进行富文本html内容中 图片展示、视频播放、音频播放。

    微信小程序内嵌radio的小弹窗

    在开发微信小程序中,弹窗虽然可以使用wx.showModel的API,但是这个API不够强大,content中的内容只能是String类型,如果我们想在content中加入一些单选框或者复选框来做一些数据统计时,该如何办呢?这里我写了一个...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js...只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,关闭后自动显示select控件 弹出层并随页面滚动而滚动

    第八课 单例模式1

    单例模式是一种设计模式,它的主要目标是确保一个类在整个应用程序中只有一个实例存在,并提供一个全局访问点,以便任何地方都能方便地使用该实例。这种模式在需要频繁创建和销毁对象,或者对象创建代价较高的场景中...

    JavaScript蒙板(model)功能的简单实现代码

    蒙板内部可能包含内容,这里使用了`.model-content`类来定义内容区域的样式,例如: ```css .model-content { width: 50%; text-align: center; background: #ffffff; border-radius: 6px; margin: 100px auto...

    js 页面传参数时 参数值含特殊字符的问题

    工作中遇到的小问题,一个页面中通过window.showModel(“comm/morelanguage.jsp?str=zh_CN:爱#;zh_TW:愛;en:love;”,,,,);弹出另一个页面并将参数传递到另一个页面,另一个页面接受得到src参数值时会出现问题,值...

Global site tag (gtag.js) - Google Analytics