javascript 弹出层组件(升级版)


Posted in Javascript onMay 12, 2011

这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹出层可以遮住。第二个问题,由于是绝对定位,所以在改变浏览器窗口大小的时候会出现无法自动跟随。大家试试就知道了,当然问题肯定不少,只是这两个我认为比较重要的,暂时列出来,以后修复。

下面是代码,里面都有注释,可以直接运行。
在线演示 http://demo.3water.com/js/2011/js_popup_up/index.htm

<!DOCTYPE> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>lock page</title> 
<meta name="author" content="www.planeart.cn" /> 
<link rel="stylesheet" type="text/css" href="style/css/j_dialog.css" /> 
<style> 
body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;} 
button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;} 
h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; } 
address, cite, dfn, em, var { font-style: normal; } 
code, kbd, pre, samp { font-family: courier new, courier, monospace; } 
small { font-size: 12px; } 
ul, ol { list-style: none; } 
sup { vertical-align: text-top; } 
sub { vertical-align: text-bottom; } 
legend { color: #000; } 
fieldset, img { border: 0; } 
button, input, select, textarea { font-size: 100%; } 
table { border-collapse: collapse; border-spacing: 0; } 
.clear {clear:both;} 
html { overflow:-moz-scrollbars-vertical; } 
a { text-decoration: none;} 
a:hover { text-decoration: underline;} #pageOverlay {overflow:hidden;display:none;position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } 
.pageDialog{border: 4px solid #999999;display:none;position:fixed; top:40%; left:50%; z-index:1988;background:#fff;} 
.pageDialog h3{padding-left:10px;overflow:hidden;font-size:14px;font-weight:normal;height:25px;line-height:25px;background:#666;color:#fff;zoom:1;} 
.pageDialog h3 a{float:right;color:#ddd;display:inline;font-weight:bold;width:20px;text-align:center;margin-right:5px;} 
.pageDialog h3 a:hover{ text-decoration: none;color:#fff;} 
.pageDialog span{margin:10px;display: block;} 
.pageDialog .confirm,.pageDialog .concel{display:inline-block;background:#ccc url(../images/DialogBtn.png) no-repeat;width:45px;height:25px;text-align:center;line-height:25px;font-weight:bold;margin-right:10px;} 
.pageDialog .confirm:hover,.pageDialog .concel:hover{ text-decoration: none;} 
.pageDialog .confirm{background-position:0 0;color:#000;} 
.pageDialog .concel{background-position:-45px 1px;color:#000;display:none;} 
.oprate{margin:20px 0 10px 0;text-align:center;} 
#test li{display:inline;} 
</style> 
<script type="text/javascript"> 
function d_log(contents){ 
if(!(this instanceof d_log)) 
return new d_log(contents); 
this.title=contents&&contents.title||"系统提示";//默认系统提示 
this.con=contents&&contents.con||"";//默认弹出内容为空 
this.wrap=contents&&contents.wrapId;//是否为自定义弹出层 
this.confirm=contents&&contents.confirm;//是否需要确认按钮 
this.wraphide=contents&&contents.wraphide||!1;//是否显示背景遮罩层 
this.pos=contents&&contents.pos;//自带左右上下角的定位 
if(document.getElementById('pageOverlay')){//公用一个cover层,这样避免冗余标签 
this.cover=document.getElementById('pageOverlay'); 
}else{ 
this.cover=document.createElement('div'); 
this.cover.id='pageOverlay'; 
this.cover.style.display='none'; 
document.body.appendChild(this.cover); 
} 
this.dialog=document.createElement('div');//对话框 
this.dialog.className='pageDialog'; 
document.body.appendChild(this.dialog); 
this.init(); 
} 
d_log.prototype.init=function(){ 
var self=this,c_height,l,t; 
c_height=document.compatMode!="BackCompat" ? document.documentElement.clientHeight : document.body.clientHeight; 
if(self.wrap){//如果有指定显示的层则把它加到弹出层中 
self.dialog.appendChild(document.getElementById(self.wrap)); 
}else{//没有则重新构建一个弹出层 
self.dialog.innerHTML='<div style="width:300px;"><h3><a class="d_dialog_close" href="javascript:;">x</a>'+self.title+'</h3>'; 
self.dialog.innerHTML+=self.con+"<p class='oprate'><a href='javascript:;' class='confirm'>确定</a><a href='javascript:;' class='concel'>取消</a></p></div>"; 
var _p = self.dialog.getElementsByTagName('p')[0]; 
if(self.confirm) 
_p.lastChild.style.display='inline-block'; 
addEvent(_p.getElementsByTagName('a')[0],'click',function(){ 
self.close(); 
if(self.confirm)eval(self.confirm+'()'); 
}); 
addEvent(_p.getElementsByTagName('a')[1],'click',function(){ 
self.close(); 
}); 
addEvent(self.dialog.getElementsByTagName('a')[0],'click',function(){ 
self.close(); 
}); 
} 
switch(self.pos){ 
case 'left-top': 
l=0; 
t=0; 
break; 
case 'left-bottom': 
l=0; 
t=c_height-parseInt(getSize(self.dialog).height); 
break; 
case 'right-top': 
l=document.body.clientWidth-parseInt(getSize(self.dialog).width); 
t=0; 
break; 
case 'right-bottom': 
l=document.body.clientWidth-parseInt(getSize(self.dialog).width); 
t=c_height-parseInt(getSize(self.dialog).height); 
break; 
default: 
l=(document.body.clientWidth-parseInt(getSize(self.dialog).width))/2; 
t=(c_height-parseInt(getSize(self.dialog).height))/2; 
} 
self.dialog.style.left=l+'px'; 
self.dialog.style.top=t+'px'; 
if(!window.XMLHttpRequest){ 
var body,clone,cover = self.cover; 
var iframe = '<iframe width="100%" height="100%" frameborder="0" scrolling="no" style="z-index:1000; position: absolute; left: 0pt; top: 0pt;filter:alpha(opacity=0);"></iframe>'; 
self.dialog.style.position = 'absolute'; 
try{ 
document.execCommand("BackgroundImageCache", false, true); 
}catch(e){} 
(function(){ 
body = document.body; 
if (body.currentStyle.backgroundAttachment !== "fixed") { 
if (body.parentNode.currentStyle.backgroundImage === "none") { 
body.parentNode.runtimeStyle.backgroundRepeat = "no-repeat"; 
body.parentNode.runtimeStyle.backgroundImage = "url(about:blank)"; 
} 
body.style.height='100%'; 
} 
self.layer = document.createElement("<div style='position:absolute;z-index:1990;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:none;'>"); 
})(); 
clone=self.dialog.cloneNode(true); 
document.body.removeChild(self.dialog); 
self.layer.appendChild(clone); 
self.dialog=clone; 
if(self.layer.parentNode!== body ) 
body.insertBefore(self.layer, body.childNodes[0]); 
//self.dialog.innerHTML += iframe; 
cover.innerHTML = iframe; 
cover.style.cssText='position:absolute;left:expression((document).documentElement.scrollLeft);top:expression((document).documentElement.scrollTop);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);'; 
} 
} 
d_log.prototype.open=function(){ 
if(this.layer) 
this.layer.style.display='block'; 
this.dialog.style.display='block'; 
if(!this.wraphide) 
this.cover.style.display='block'; 
} 
d_log.prototype.close=function(){ 
if(this.layer) 
this.layer.style.display='none'; 
this.dialog.style.display='none'; 
this.cover.style.display='none'; 
} 
function getSize(elem) {//获取元素的宽高,包括隐藏元素的 
var width = elem.offsetWidth, height = elem.offsetHeight; 
if ( !width && !height ) { 
var style = elem.style; 
var cssShow ="position:absolute;visibility:hidden;display:block;left:-9999px;top:-9999px;"; 
var cssBack ="position:"+style.position+";visibility:"+style.visibility+";display:"+style.display+";left:"+style.left+";top:"+style.top; 
elem.style.cssText=cssShow; 
width = elem.offsetWidth; height = elem.offsetHeight; 
elem.style.cssText=cssBack; 
} 
return { "width": width, "height": height }; 
} 
function addEvent(el,type,fn){ //绑定事件 
var self = this; 
if(el.attachEvent) { 
el['e'+type+fn] = fn; //IE下拷贝元素引用,使this指向el对象而不是window 
el[type+fn] = function(){el['e'+type+fn](window.event);} 
el.attachEvent('on'+type, el[type+fn]); 
}else 
el.addEventListener(type, fn, false); 
} 
</script> 
</head> 
<body onload="dlg3.open()"> 
<ol id="test"> 
<li id="par" style="display:none;"><a id='no1' class="abc ggl" href="javascript:dlg1.open();">点击我试试</a></li> 
<li><a href="javascript:dlg2.open();">自定义弹出层</a></li> 
<li><a href="javascript:dlg1.open();">自带模态对话框</a></li> 
<li><a href="javascript:dlg3.open();">右下角广告</a></li> 
</ol> 
<div id="result"></div> 
<select><option label="1111111111">abcd111</option><option label="222222222">abcd222</option></select> 
<div id="owp" style="width:300px;height:200px;">这是第二个测试例子!<a href="javascript:dlg2.close();">x</a></div> 
<div id="owp1" style="width:200px;height:100px;">右下角广告<a href="javascript:dlg3.close();">x</a></div> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
</body> 
</html> 
<script> 
//参数con为自带弹出框的内容,confirm为是否需要确认按钮,wraphide是否显示遮罩层,wrap自定义层id 
var dlg1=d_log({con:'<span>确定要删除此文件吗?</span>',confirm:'check'});//自动生成的dialog 
var dlg2=d_log({wraphide:'hide',wrapId:'owp'});//自定义的dialog 
var dlg3=d_log({wraphide:'hide',wrapId:'owp1',pos:'right-bottom'});//pos弹出层的位置 
var arr=[1,2,3,4,5,5,6,7,8]; 
function check(){ 
alert('test!'); 
} 
</script>
Javascript 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 #Javascript
关于js获取radio和select的属性并控制的代码
May 12 #Javascript
js 第二代身份证号码的验证机制代码
May 12 #Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 #Javascript
五个jQuery图片画廊插件 推荐
May 12 #Javascript
JavaScript 继承使用分析
May 12 #Javascript
JS焦点图切换,上下翻转
May 12 #Javascript
You might like
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP正则验证Email的方法
2015/06/15 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
自考生毕业自我鉴定
2013/10/10 职场文书
办公室主任岗位职责
2013/11/08 职场文书
文员岗位职责
2013/11/09 职场文书
市场部管理制度
2014/02/02 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
干部考核工作总结2015
2015/07/24 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python