首页
所有分类
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 相关文章推荐
Javascript 作用域使用说明
Aug 13 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
javascript常用函数（2）
Nov 05 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
js实现自定义右键菜单
May 18 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
vuex(1) persistedstate(1) Vue3(1) axios(1) Set接口(1) Vue(10) InputStream(1) HashSet集合(1) OutputStream(1) 高动态范围(1)
You might like
一个php作的文本留言本的例子(二)
2006/10/09 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript 面向对象编程基础：继承
2009/08/21 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）
2019/04/09 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python实现任意位置文件分割的实例
2018/12/14 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python中turtle库的简单使用教程
2020/11/11 Python
CSS3 3D立方体效果示例－transform也不过如此
2016/12/05 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
香港草莓网土耳其网站：Strawberrynet TR
2017/03/02 全球购物
护理自荐信
2013/10/22 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
善意的谎言事例
2014/02/15 职场文书
党校毕业心得体会
2014/09/13 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
离婚起诉书范本
2015/05/18 职场文书
铁人观后感
2015/06/16 职场文书