javascript Demo模态窗口


Posted in Javascript onDecember 06, 2009

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

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

modalDialog.js 文件代码如下:
代码
//Modaldialog 
function modalDialog() { 
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 () { 
var js = window.js; 
//在里面实现显示的细节 
var x = js.bodyWidth, y = js.bodyHeight; 
//先创建一个层遮罩整个body 
var zdiv = "zdiv"; //遮罩层id 
document.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>"; 
var mdiv = "mdiv"; //模态窗口层id 
document.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
代码
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>模态窗口Demo</title> 
<!--下面这个js文件为我们的公共js文件--> 
<script type="text/javascript" src="global.js"></script> 
<!--ModalDialog UI js文件--> 
<script type="text/javascript" src="modaldialog.js"></script> 
<script type="text/javascript"> 
var md; //用于页面回调 
var uri = "/test.html"; 
function showModalDialog() { 
//处理打开模态窗口 
var m = new modalDialog(); 
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 /> 
<input id="btopenDialog" type="button" value="打点模态窗口!" onclick="showModalDialog()" /> 
</div> 
</body> 
</html>

在modalDialog页面中使用window.parent.md.call()触发回调函数
文件打包三水点靠木下载
Javascript 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
node+vue实现文件上传功能
May 28 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
jquery select操作的日期联动实现代码
Dec 06 #Javascript
JSON 编辑器实现代码
Dec 06 #Javascript
JS 控制非法字符的输入代码
Dec 04 #Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 #Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 #Javascript
javascript 跳转代码集合
Dec 03 #Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 #Javascript
You might like
PHP脚本的10个技巧(4)
2006/10/09 PHP
php之Memcache学习笔记
2013/06/17 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php session 写入数据库
2016/02/13 PHP
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python字符串反转的四种方法详解
2019/12/02 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
农林环境专业求职信
2014/03/13 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
禁毒心得体会范文
2016/01/15 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python