分享⼀个⽹页右下⾓弹窗的代码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.instance = "dialog";//实例
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;
t) t = t;
}
if(!window.dialogBoxList){
window.dialogBoxList = [];
}
window.dialogBoxList[window.dialogBoxList.length] = this;
this.index = window.dialogBoxList.length;
//弹出层
this.show = function(){
//背景层
var bgl = ElementById("backgroundLayer_"+this.id);
if(bgl) veChild(bgl);
//创建弹出背景层
bgl = ateElement("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";
p = "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=\"#\" οnclick=\""+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\">";
t) titleHTML += t;
titleHTML += "</div>";
bgl.innerHTML = titleHTML;
bgl.style.height = "0px";
p = (p + this.height )+ "px";
};
//关闭层
this.close = function(){
var me = this;
var bgl = ElementById("backgroundLayer_"+me.id);
if(bgl){
veChild(bgl);
}
};用html设计一个疫情网页代码
pTimer);
pTimer);
this.bf = this.buffer(0, this.height,this.step);
var bgl = ElementById("backgroundLayer_"+this.id);
var me = this;
bgl.style.height = me.bf[0] + "px";
p = me.top + me.index * me.height - me.index * me.bf[0] + "px";
if(me.bf[1] == 0) {
pTimer);
}
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];
}

//窗体改变⼤⼩时——遮罩背景层
var me = this;
var bgl = ElementById("backgroundLayer_"+me.id);
if(bgl){
p = "0px";
bgl.style.left = "0px";
var pageSize = new PageSize();
bgl.style.left = (pageSize.clientWidth + pageSize.scrollLeft - me.width - 4) + "px";
p = (pageSize.clientHeight + pageSize.scrollTop - (me.index * (me.height + 4))) + "px";  p = pageSize.clientHeight + pageSize.scrollTop - (me.index * (me.height + 4));
}
};
//窗体改变⼤⼩时——重绘⽹格列表
var me = this;
size_fun){
}
if(me) me.resize();
}
};
}
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(documentpatMode == "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.scrollLeft = document.body.scrollLeft;
this.scrollTop = document.body.scrollTop;
}else if(documentpatMode == "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.show();
var dialog2 =new DialogBox({id:"2",instance:"dialog2",title:"提⽰"});
dialog2.show();
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。