首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
layui表格数据重载
Jul 27 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 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
Storage(1) 自定义组件(1) 项目打包(2) KVM(1) Jmerte(1) click(1) vue-router-link(1) 本地化存储(1) Yolov5(1) TimePickerView(1)
You might like
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php对数组排序的简单实例
2013/12/25 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[36:52]DOTA2真视界：基辅特锦赛总决赛
2017/05/21 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python raise的基本使用
2020/09/10 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
英语教师岗位职责
2014/03/16 职场文书
教师对学生的评语
2014/04/28 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
大学生见习报告范文
2014/11/03 职场文书
小时代观后感
2015/06/10 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫