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中Eval函数的使用说明
Oct 11 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
javascript实现简易计算器
Feb 01 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
使用jQuery实现购物车
Oct 29 jQuery
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
JS实现炫酷轮播图
Nov 15 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关联链接常用代码
2012/11/05 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
linux下编译安装memcached服务
2014/08/03 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python super()方法原理详解
2020/03/31 Python
Django url 路由匹配过程详解
2021/01/22 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
new修饰符是起什么作用
2015/06/28 面试题
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
自我鉴定范文
2013/11/10 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
亮剑观后感300字
2015/06/05 职场文书
告知书格式
2015/07/01 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers