分享一个网页右下角弹窗的代码

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";//层IDthis.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>