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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
编写自己的php扩展函数
2006/10/09 PHP
PHP与MySQL交互使用详解
2006/10/09 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
Python正则抓取网易新闻的方法示例
2017/04/21 Python
基于python socketserver框架全面解析
2017/09/21 Python
python 识别图片中的文字信息方法
2018/05/10 Python
python实现自动登录
2018/09/17 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
大学生军训感想
2014/02/16 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
物流管理专业自荐信
2014/06/23 职场文书
2015年档案室工作总结
2015/05/23 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android