1. add <base target="_self" /> in the page of dialog, no need to use frame:

<head>

<base target="_self" />

2. add div_conver class in style file

  1. /*-------------------------------- used by dialog.js ----------------------------------------------------------*/.div_cover
  2. {
  3.     z-index:; left:0px; top:0px; width:%; height:%; position:); opacity:0.6; display:none;
  4. }

3. Modify code get dialog argument. for example, in UserSelector.js

  1. if(window.dialogArguments.insertXML!=null)
  2. {
  3.      GetInsertXML=window.dialogArguments.insertXML;    // Wrong
  4. }

Now: GetInsertXML = window.dialogArguments;

  1. var Dialog = {
  2.     Show: function (url, width, height, objArgument) {
  3.         if (isChrome()) {
  4.             showCover();
  5.         }
  6.  
  7.         var objArgument = objArgument || window;
  8.         var retValue = window.showModalDialog(url, objArgument, 'scroll=yes;resizable=no;help=no;status=no;center=yes;dialogHeight=' + height + 'px;dialogWidth=' + width + 'px;');
  9.         if (isChrome()) {
  10.             hideCover();
  11.             retValue = window.returnValue;
  12.         }
  13.         )//for IE, convert string to array, IE will lose array when window close
  14.             retValue = retValue.split(",");
  15.  
  16.         return retValue;
  17.     },
  18.  
  19.     GetDialogArguments : function(){
  20.         return window.dialogArguments;
  21.     },
  22.  
  23.     CloseAndReturn: function (v) {
  24.         var retValue;
  25.         if (isIE() && Object.prototype.toString.call(v) === "[object Array]") //for IE, convert array to string, IE will lose array when window close
  26.             retValue = v.join();
  27.         else
  28.             retValue = v;
  29.  
  30.         if (isChrome()) {
  31.             //for chrome
  32.             window.opener.returnValue = retValue;
  33.             window.close();
  34.         } else {
  35.             window.returnValue = retValue;
  36.             window.close();
  37.         }
  38.     },
  39.  
  40.     Close: function () {
  41.         window.close();
  42.     }
  43. }
  44.  
  45. function isIE() {
  46.     ;
  47. }
  48.  
  49. function isChrome() {
  50.     return navigator.appName == "Netscape";
  51. }
  52.  
  53. function showCover() {
  54.     setCoverDisplay("block");
  55. }
  56.  
  57. function hideCover() {
  58.     setCoverDisplay("none");
  59. }
  60.  
  61. function setCoverDisplay(display) {
  62.     if (document.getElementById("winCover") != null)
  63.         document.getElementById("winCover").style.display = display;
  64.  
  65.     ].document.getElementById("winCover") != null)
  66.         window.top.frames[].document.getElementById("winCover").style.display = display;
  67.  
  68.     ].document.getElementById("winCover") != null)
  69.         window.parent.frames[].document.getElementById("winCover").style.display = display;
  70. }

用法：

parent window :

<script type="text/javascript" src="ModalDialog.js"></script>
<script type="text/javascript">
function show() {
var ret = Dialog.Show("dialog.html", 200, 300);
alert("return:" + ret);
}
</script>

dialog:

<script type="text/javascript" src="ModalDialog.js"></script>
<script type="text/javascript">
function rt(s) {
Dialog.CloseAndReturn(s);
}
</script>

//---------------------------------------

框架页面中，div只能覆盖当前框架，解决方法：在各个框架页面中创建一个div(包括topMenu,leftMenu), 当需要现实dialog时，显示各个框架页面中的div

  1. function showCover() {
  2.             document.getElementById("dCover").style.display = "block";
  3.             window.top.frames[].document.getElementById("dCover").style.display = "block";
  4.         }

ModalDialog.js的更多相关文章

  1. Vue.js——vue-resource全攻略

    概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...

  2. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  3. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  4. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  5. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  6. JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  7. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  9. JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

随机推荐

  1. MVC项目实践,在三层架构下实现SportsStore-08,部署到IIS服务器

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  2. H3C Series Router MSR26-00与F3736 VPN IP SEC

    注:建立链接之后经常断线,需要两边进行PING通才可以.待解决.

  3. MongoDB ObjectId

    概述 > db.col.find() { , } { , } { , } { , } 每个文档中都有一个“_id”,她是一个12字节的BSON类型数据,格式如下 56c56dd4ca446fab ...

  4. IIS应用程序池添加ASP.NET v4.0

    可能在安装.NET Framewrok 4.0之前,IIS就已经装好了,结果在IIS的应用程序池中只有.NET 2.0的Classic .NET AppPool和DefaultAppPool.在使用v ...

  5. iOS 归档

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...

  6. lua metatable 和 _index 实验

    lua metatable 和 _index 中文博客解释: http://www.cnblogs.com/simonw/archive/2007/01/17/622032.html metatabl ...

  7. Java基础之序列化对象——反序列化对象（DeserializeObjects）

    控制台程序,使用如下代码能读入包含Junk对象的文件: import java.io.*; import java.nio.file.*; class DeserializeObjects { pub ...

  8. 从零开始攻略PHP（6）——代码重用与函数编写的一些注意事项

    一个新的项目是这样创建的:它将已有的可重新利用的组件进行组合,并将新的开发难度降低到最小. 代码重用的好处:降低成本.提升可靠性和一致性. 1.使用require()和include()函数 使用一条 ...

  9. Java堆内存

    Java 中的堆是 JVM 所管理的最大的一块内存空间,主要用于存放各种类的实例对象. 在 Java 中,堆被划分成两个不同的区域:新生代 ( Young ).老年代 ( Old ).新生代 ( Yo ...

  10. Lintcode: Segment Tree Query

    For an integer array (index from 0 to n-1, where n is the size of this array), in the corresponding ...