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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
Vue实现简单的跑马灯
May 25 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作的文本留言本的例子(二)
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
JQuery球队选择实例
2015/05/18 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
使用python实现生成用户信息
2017/03/20 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
使用python编写监听端
2018/04/12 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python 安装impala包步骤
2020/03/28 Python
Python @property及getter setter原理详解
2020/03/31 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
大学校庆策划书
2014/01/31 职场文书
群众路线党课主持词
2014/04/01 职场文书
《忆江南》教学反思
2014/04/07 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python