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 相关文章推荐
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 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
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
python 自动提交和抓取网页
2009/07/13 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python读取并写入mat文件的方法
2019/07/12 Python
实现Python与STM32通信方式
2019/12/18 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
django有哪些好处和优点
2020/09/01 Python
运行Python编写的程序方法实例
2020/10/21 Python
python中@contextmanager实例用法
2021/02/07 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
餐饮投资计划书
2014/04/25 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python
Python软件包安装的三种常见方法
2022/07/07 Python