dialogBox\css\dialogBox.css
*{
margin:0px;
border:0px;
padding:0px;
}
.backgroundLayer_db{
position:absolute;
z-index:9998;
border: 1px solid #A67901;
background: #EAEAEA;
overflow:hidden;
}
.move_div{
width:100%;
height:25px;
background:url(../img/title_bg.jpg) repeat-x;
}
.close_a{
cursor: pointer;
text-decoration: none;
display:inline-block;
width:25px;
height:25px;
line-height:25px;
overflow:hidden;
}
.title_span{
height:25px;
line-height:25px;
display:inline-block;
overflow:hidden;
}
.close_span{
width:100%;
height:100%;
background:url(../img/closeBox.gif) no-repeat;
background-position:center center;
display:inline-block;
}
.content_div{
width:100%;
height:100%;
background: #ffffff;
overflow:hidden;
}
dialogBox\css\dialogBox.js
function DialogBox(args){
this.id = "0";//层ID
this.title = "";//层标题
this.width = 300;//层宽度
this.height = 200;//层高度
this.step = 10;
this.instance = "dialog";//实例
this.content = "";//层内容
if(args){
if(args.id) this.id = args.id;
if(args.title) this.title = args.title;
if(args.width) this.width = args.width;
if(args.height) this.height = args.height;
if(args.instance) this.instance = args.instance;
if(args.content) this.content = args.content;
}
if(!window.dialogBoxList){
window.dialogBoxList = [];
}
window.dialogBoxList[window.dialogBoxList.length] = this;
this.index = window.dialogBoxList.length;
//弹出层
this.show = function(){
//背景层
var bgl = document.getElementById("backgroundLayer_"+this.id);
if(bgl) document.body.removeChild(bgl);
//创建弹出背景层
bgl = document.createElement("div");
//给这个元素设置属性与样式
bgl.id = "backgroundLayer_"+this.id;
bgl.className = "backgroundLayer_db";
bgl.style.width = this.width+"px";
bgl.style.height = this.height+"px";
bgl.style.left = "0px";
bgl.style.top = "0px";
document.body.appendChild(bgl);
var titleHTML = "";
titleHTML += "<div id=\"move_div_"+this.id+"\" name=\"move_div\" class=\"move_div\">";
titleHTML += "<span id=\"title_span_"+this.id+"\" name=\"title_span\" class=\"title_span\" style=\"width:"+(this.width - 35)+"px;\">";
titleHTML += this.title;
titleHTML += "</span>";
titleHTML += "<a href=\"#\" onclick=\""+this.instance+".close();return false;\" class=\"close_a\" title=\"关闭\">";
titleHTML += "<span id=\"close_span_"+this.id+"\" name=\"close_span\" class=\"close_span\"> </span>";
titleHTML += "</a>";
titleHTML += "</div>";
titleHTML += "<div id=\"content_div_"+this.id+"\" name=\"content_div\" class=\"content_div\">";
if(this.content) titleHTML += this.content;
titleHTML += "</div>";
bgl.innerHTML = titleHTML;
this.resize();
bgl.style.height = "0px";
bgl.style.top = (this.top + this.height )+ "px";
this.moveTo();
};
//关闭层
this.close = function(){
var me = this;
var bgl = document.getElementById("backgroundLayer_"+me.id);
if(bgl){
document.body.removeChild(bgl);
}
};
this.moveTo = function(){
clearInterval(this.tempTimer);
this.bf = this.buffer(0, this.height,this.step);
var bgl = document.getElementById("backgroundLayer_"+this.id);
var me = this;
this.tempTimer = setInterval(function() {//alert(me.bf[0]);
bgl.style.height = me.bf[0] + "px";
bgl.style.top = me.top + me.index * me.height - me.index * me.bf[0] + "px";
if(me.bf[1] == 0) {
clearInterval(me.tempTimer);
}
me.bf = me.buffer(me.bf[0],me.height,me.step);
}, 10);
}
this.buffer = function(a, b, c) {//缓冲计算
var cMath = Math[(a - b) > 0 ? "floor" : "ceil"];
c = c || 0.1;
return [a += cMath((b - a) / c), a - b];
}
this.top = 0;
//窗体改变大小时——遮罩背景层
this.resize = function(){
var me = this;
var bgl = document.getElementById("backgroundLayer_"+me.id);
if(bgl){
bgl.style.top = "0px";
bgl.style.left = "0px";
var pageSize = new PageSize();
bgl.style.left = (pageSize.clientWidth + pageSize.scrollLeft - me.width - 4) + "px";
bgl.style.top = (pageSize.clientHeight + pageSize.scrollTop - (me.index * (me.height + 4))) + "px";
this.top = pageSize.clientHeight + pageSize.scrollTop - (me.index * (me.height + 4));
}
};
this.onresize_fun = window.onresize;
//窗体改变大小时——重绘网格列表
this.onresize = function(){
var me = this;
window.onresize = function(){
if(me.onresize_fun){
me.onresize_fun();
}
if(me) me.resize();
}
};
this.onresize();//执行
}
function PageSize(){
this.pageWidth = 0 ;
this.pageHeight = 0 ;
this.clientWidth = 0;
this.clientHeight = 0;
//注意：scrollLeft、scrollTop必须在onscroll函数下才有值，直接打印出来是为0
this.scrollLeft = 0;//网页被卷去的左
this.scrollTop = 0;//网页被卷去的高
if(document.compatMode == "BackCompat") {
this.pageWidth = document.body.scrollWidth;//body 对象
this.pageHeight = document.body.scrollHeight;
this.clientWidth = document.body.clientWidth;
this.clientHeight = document.body.clientHeight;
this.scrollLeft = document.body.scrollLeft;
this.scrollTop = document.body.scrollTop;
}else if(document.compatMode == "CSS1Compat"){
this.pageWidth = document.documentElement.scrollWidth;//html 对象
this.pageHeight = document.documentElement.scrollHeight;
this.clientWidth = document.documentElement.clientWidth;
this.clientHeight = document.documentElement.clientHeight;
this.scrollLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
this.scrollTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
this.pageWidth = this.pageWidth > this.clientWidth ? this.pageWidth : this.clientWidth;
this.pageHeight = this.pageHeight > this.clientHeight ? this.pageHeight : this.clientHeight;
}
dialogBox\img
closeBox.gif
还有一张背景上传不了。。
例子dialogBox.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>层</title>
<link href="css/dialogBox.css" type="text/css" rel="stylesheet"/>
<script src="js/dialogBox.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var dialog1 =new DialogBox({id:"1",instance:"dialog1",title:"提示"});
dialog1.content="dialog1";
dialog1.show();
var dialog2 =new DialogBox({id:"2",instance:"dialog2",title:"提示"});
dialog2.content="dialog2";
dialog2.show();
</script>
</body>
</html>