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 类定义的4种方法
Sep 12 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 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
substr()函数中文版
2006/10/09 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python自动12306抢票软件实现代码
2018/02/24 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python实现tail -f 功能
2020/01/17 Python
基于Python的OCR实现示例
2020/04/03 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
四风问题自查报告剖析材料
2014/02/08 职场文书
升国旗仪式主持词
2014/03/19 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技