不多介绍了,应该见很多了，见过很多网站用的是Jquery的插件,个人觉得不够灵活

下面这个Demo支持回调，可以直接引用modalDialog.js使用,不存在任何Jquery的影子

global.js

代码

window.js=newmyJs();//为了避免名称重复我们换个名称,附加一个myJs对像到window对象上，然后我们在页面中调用window.js//js对象functionmyJs() {this.x=10;
}//下面我们对myJs进行扩展myJs.prototype.alert=function(msg) { alert(msg); }//一个alert方法测试调用js.alert('弹出提示');//获取制定Id的dom对象myJs.prototype.$=function(id) {returndocument.getElementById(id); }

myJs.prototype.bodyWidth=document.documentElement.clientWidth;
myJs.prototype.bodyHeight=document.documentElement.clientHeight;
myJs.prototype.body=document.body;

modalDialog.js 文件代码如下:

代码

//ModaldialogfunctionmodalDialog() {this.uri="about:blank";//地址this.title=null;//标题this.width=400;//默认宽this.height=300;//默认高this.borderColor="black";//边框颜色this.borderWidth=2;//边框宽度this.callback=null;//回调方法this.background="black";this.titleBackground="silver";
}
modalDialog.prototype.url=this.uri;//这样不用扩展也是可以的但是在页面中只能提示找不到这个属性modalDialog.prototype.title=this.title;
modalDialog.prototype.width=this.width;
modalDialog.prototype.height=this.height;
modalDialog.prototype.background=this.background;
modalDialog.prototype.borderWidth=this.borderWidth;
modalDialog.prototype.borderColor=this.borderColor;
modalDialog.prototype.titleBackground=this.titleBackground;
modalDialog.prototype.callback=this.callback;//触发回调方法modalDialog.prototype.call=function(callback) {if(callback!=null) callback(this);if(this.callback!=null)this.callback(); }//显示modalDialog.prototype.show=function() {varjs=window.js;//在里面实现显示的细节varx=js.bodyWidth, y=js.bodyHeight;//先创建一个层遮罩整个bodyvarzdiv="zdiv";//遮罩层iddocument.body.innerHTML+="<div id='"+zdiv+"' style='width:"+x+"px;height:"+y+"px;background-color:"+this.background+";position:absolute;top:0;left:0;"+"filter:alpha(opacity=80);opacity:0.8;z-index:'></div>";varmdiv="mdiv";//模态窗口层iddocument.body.innerHTML+="<div id='"+mdiv+"' style='width:"+this.width+"px;height:"+this.height+"px;"+"border:solid"+this.borderWidth+"px"+this.borderColor+";z-index:20;position:absolute;top:"+(y-this.height)/2+";left:"+(x-this.width)/2+";'>"+//加上标题(this.title!=null?"<div style='background:"+this.titleBackground+";line-height:30px;padding:0 10px;width:100%'>"+this.title+"</div>":"")+"<div style='padding:1px;'><iframe src='"+this.uri+"' frameborder='0' scrolling='no' style='width:"+(this.width)+"px;height:"+(this.title!=null?this.height-30:this.height)+"px;'></iframe></div></div>";
}
modalDialog.prototype.close=function() {
    document.body.removeChild(window.js.$("mdiv"));
    document.body.removeChild(window.js.$("zdiv"));
}

default.html 页面上创建modalDialog

代码

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>模态窗口Demo</title><!--下面这个js文件为我们的公共js文件--><scripttype="text/javascript"src="global.js"></script><!--ModalDialog UI js文件--><scripttype="text/javascript"src="modaldialog.js"></script><scripttype="text/javascript">varmd;//用于页面回调varuri="/test.html";functionshowModalDialog() {//处理打开模态窗口varm=newmodalDialog();
                m.uri=uri;
                m.title="模态窗口";
                m.background="white";
                m.borderColor="orange";
                m.borderWidth=2;
                m.titleBackground="gold";
                m.callback=function() { m.close(); }//m.call();  这个回调方法在modalDialog的Uri中调用m.show();

md=m;
            }</script></style></head><body><div>用javascript+css实现ModalDialog<br/>Jquery框架里面有个插件也可以实现这种效果，不过我们说的是自己实现<br/><inputid="btopenDialog"type="button"value="打点模态窗口!"onclick="showModalDialog()"/></div></body></html>

在modalDialog页面中使用window.parent.md.call()触发回调函数

源代码:ModalDialogDemo.rar   [VS2010]

转载于:https://www.cnblogs.com/newmin/archive/2009/12/04/javascript_modalDialog.html

javascript模态窗口Demo相关推荐

  1. html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件

    draggable-google-modal是一款可拖拽的谷歌样式纯javascript模态窗口插件.该模态窗口插件使用纯js编写,模态窗口可以任意进行拖动,并且模态窗口可以全屏放大,或左右对齐占据半 ...

  2. html弹出非模式窗口,JavaScript模态窗口和非模态窗口（转）

    JavaScript中弹出的窗口有模态窗口和非模态窗口.模态窗口就是打开一个子窗口,如果这个子窗口不关闭,就不能操作它的父窗口,原来程序暂停执行,直到这个模态窗口关闭 后才回到原来程序继续.非模态的就 ...

  3. 使用jQuery创建模态窗口登陆效果

    来源:GBin1.com 在线下载 在线演示 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单.在博 ...

  4. window.showModalDialog弹出模态窗口

    [转http://www.cnblogs.com/zhouzhaokun/archive/2011/11/14/2248523.html] 在我们平时的B/S web开发当中,可能很多时候我们需要有这 ...

  5. Codrops 教程：基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

  6. asp.net模态窗口返回值

    个人感觉模态窗口在做网站的时候,使用到的比较少,前段时间在做项目时要实现以模态窗口传值和接收返回值, 模态窗口传值实现比较简单,但是做好后发现在Chrome浏览器中接收不到返回值,修改好Chrome浏 ...

  7. 多个按钮触发同一个Bootstrap自适应模态窗口

    在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...

  8. bootstrap 模态窗口按钮位置_Bootstrap 模态框（Modal）插件的使用

    Bootstrap模态框(modal)不知道谁起的名字,反正就这么回事.经常使用在网站的 登陆/注册 按钮,弹出模态框,来提醒用户输入的同时,网站有一个遮罩层来屏蔽其他的操作. 一. 使用方法:1.通 ...

  9. 使用模态窗口编辑数据

    为提高客户的体验,经常使用模态窗口.以下为使用的一个例子. 1.建立一个含有iframe的html文件,用于防止自刷新的问题. Fram.htm <html><head>< ...

最新文章

  1. C++ 中 inline 用法概述
  2. vue国际化-vue-i18n的配置
  3. 用JTAG将mcs文件烧写到flash中
  4. tableView下沉
  5. 行为模式之Iterator模式
  6. leetcode算法题--二叉树中的最长交错路径★
  7. 几种常用的图像处理函数库
  8. List 的add()与addAll()的区别
  9. 操作系统01_进程和线程管理
  10. android 原理 组合控件_Android_组合方式自定义控件
  11. COM+在win2003+IIS+MSSQL环境下的部署步骤
  12. android getinstance 方法,Android中的'new Fragment（）'和'Fragment.getInstance（）'有什么区别？...
  13. 孙叫兽进阶之路之软件开发生命周期
  14. 关于IE6、7、8下实现盒阴影的几个注意点
  15. 网管师职业认证网上辅导班开课前的调查
  16. Atitit mysql存储过程编写指南
  17. python-docx页眉横线
  18. 关于struts.xml的配置思考。
  19. 原生JS实现在线音乐播放器及歌词滚动
  20. 基于Java的超级玛丽游戏的设计与实现(含源文件)

热门文章

  1. 算法竞赛入门经典第六章(例题) B - Rails（涉及到栈的运用）
  2. html/jquery最实用功能与注意点
  3. 技术公开课：SQL Server 高可用性解决方案概述（下）
  4. discuz上传附件失败问题解决办法
  5. ASP.net控件开发系列之（一、二）
  6. 优秀的测试网站（转载）
  7. matlab闭式网络潮流计算,闭式网络潮流计算.ppt
  8. rsa PHP用法,RSA常见用法整理
  9. c语言编写一个多位数的倒数
  10. 12c创建为容器数据库_详解oracle12c数据库跨小版本迁移步骤