javascript 弹出层组件（升级版）
这次还是利用原来代码的组织结构重新加强了功能，目前来说还有两个小问题，第一个是ie6下自定义弹出层会出现无法遮住select的情况，目前还没加入到组件里，可以自己在自定义的div里面加上ifame来遮罩，组件自带的弹出层可以遮住。第二个问题，由于是绝对定位，所以在改变浏览器窗口大小的时候会出现无法自动跟随。大家试试就知道了，当然问题肯定不少，只是这两个我认为比较重要的，暂时列出来，以后修复。
下面是代码，里面都有注释，可以直接运行。
在线演示 http://demo.jb51.net/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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
qsoft.PopBigImage.v0.35.demo.rar 新特性: 1.不需要onload加载和指定id了,在img中加个标记就好,第一鼠标进入时动态生成显示层 2.可以随意调整,右边的展示层的大小了. qsoft.PopBigImage version:0.35 author: kimmking@163.com date: 2009年3月26日 15:20:50 功能描述: 一般页面的的图片为了布局考虑,显示大小都小于实际大小. 鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的
-
ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件.Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件. Ext组件体系由下图所示: 组件大致可分成三大类,即基本组件.工具栏组件.表单元素组件. 基本组件有这么多的组件,可都是非常酷的.组件使
-
js实现通用的微信分享组件示例
一.可定义的信息 1.分享时显示的LOGO:2.分享LOGO的宽度:3.分享LOGO的高度:4.分享出去显示的标题(默认调用网页标题):5.分享出去显示的描述(默认调用网页标题):6.分享链接(默认为当前页面的URL).7.分享微信的APPID(一般为空). 二.使用方法1.引入微信分享组件js: 复制代码 代码如下: /******************************* * Author:Mr.Think * Description:微信分享通用代码 * 使用方法:_WXShare
-
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
调用方式 :ImageView(index,imgData) --index参数 为图片默认显示的索引值,类型 为Number --imaData参数 为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码 代码如下: /* * ImageView v1.0.0 * --基于zepto.js的大图查看 * --调用方法 ImageView(index,imgDada) * --index 图片默认值显示索引,N
-
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Extjs的Panel和Window等组件在默认情况下是带边框的,通常情况下,单独使用没有什么关系,但是将Panel作为Window组件的子组件时就会出现双重边框的现象,如果Window组件中含有两个或者两个以上的Panel,那么Panel和Panel组件之间的边框会重复累加,也就是说会变成双重边框.实际上双重边框并不是很影响外观,但多少看上去会有些不太令人满意,因此我们就得想办法将两重边框去掉,变成单边框.下面是前后两张对比图,大家仔细观察一下两个window的边框部分,可以发现前者较粗,后者
-
javascript基于HTML5 canvas制作画箭头组件
样例: 废话少说,直接上代码: arrow.js /** * 实现两点间画箭头的功能 * @author mapleque@163.com * @version 1.0 * @date 2013.05.23 */ ;(function(window,document){ if (window.mapleque==undefined) window.mapleque={}; if (window.mapleque.arrow!=undefined) return; /** * 组件对外接口 */
-
ExtJS4 组件化编程，动态加载，面向对象，Direct
ExtJS4推荐定义类的时候均使用Ext.define,利用xtype动态加载 修改了以前的一个登陆窗口,感觉用官方推荐的方法还是很不错的 但还有一些问题没有想得非常清楚,先把代码贴出来一起研究下.请看代码中的注释~~ 使用Ext+.Net,用Direct模式传递数据 Default.aspx: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
-
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
复制代码 代码如下: <script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script> <script language="javascript" src="lirms/Test/vticker.js"></script> <script type="text/javascript&q
-
Js组件的一些写法
今天看了rank的一篇javascript脚本控件topic,突然想总结一下一些写JS组件的方法,或者说一些不同人的不同coding style. 首先看下Prototype里的写法: 复制代码 代码如下: var Class = { create: function() { return function() { this.init.apply(this, arguments); } } } var A = Class.create(); A.prototype = { init: funct
-
不用一句js代码初始化组件
最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心.于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽.我们先来看看bootstrap table的文档: