js 实现Lightbox效果的弹出对话框代码

/*通用CSS*/

body{
 font-size:12px;
 padding:0;
 margin:0;
}
.right{
 float:right;
}
.red{
 color:red;
}
.blue{
 color:blue;
}

#messageBox{
 position:absolute;
 border:2px solid #3B5A6E;
 background-color:#FFFFCC;
 display:none;
 z-index:9999;
 margin:0;
 padding:0;
}

/*消息框标题*/
#messageBox h2{
 font-size:12px;
 background:url(top.gif);
 border-bottom:1px solid #3B5A6E;
 margin:0;
 color:#FFFFFF;
 padding:6px 10px 4px 10px;
}

#messageBox a{
 text-decoration:none;
 cursor:pointer;
 color:#FFFFFF;
}

/*按钮属性*/
#messageBox a.button{
 display:inline;
 display:inline-block; !important
 height:24px;
 width:60px;
 border:1px solid #282828;
 background-color:#989898;
 padding:2px;
 margin:0 10px;
}

#messageBox p{
 width:auto;
 padding:6px 10px;
 margin:0;
}

#messageBox p a{
 color:#3B5A6E;
}

#messageBox p.content{
 padding-top:12px;
 /*信息内容最低80px*/
 min-height:80px;
}

/*按钮列表*/
#messageBox p.buttons{
 border-top:1px dashed #3B5A6E;
 text-align:center;
 margin:0 10px;
}

/*按钮列表*/
#messageBox p.buttons img{
 cursor:pointer;
}

/*遮罩层*/
#messageBoxMask{
 position:absolute;
 top:0;
 left:0;
 background-color:#CCCCCC;
 /*以下控制透明效果，IE、FF*/
 filter:alpha(opacity=50);
 -moz-opacity:0.5;    /* 兼容老版本的FF */
    opacity:0.5;    /* Mozila兼容 */
 z-index:1000;
 display:none;
 margin:0;
 padding:0;
}

//$ id选择器
var $ = function(id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

//Class  类对象
var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}

//函数绑定
var Bind = function(object, fun) {
    return function() {
        return fun.apply(object, arguments);
    }
}

//For Each循环
var Each = function(list, fun) {
    for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

var MessageBox = Class.create();
MessageBox.prototype = {
 initialize: function(id){
  //弹出框宽度
  this._boxWidth = 400;
  //弹出框高度
  this._boxHeight = 180;
  //标题
  this._title = "";
  this._titleId ="";
  this._message = "";
  this._messageId ="";
  this._info = "";
  this._boxId = id;
  //附加消息框
  this.appendBody();
  //初始化消息框
  this.initMessageBox();
 },

 appendBody : function(){
  //创建用于显示的对话框容器
  var messageBox = document.createElement("div");
  messageBox.id = this._boxId;
  document.body.appendChild(messageBox);

  //创建用于显示遮罩容器
  var messageBoxMask = document.createElement("div");
  messageBoxMask.id = this._boxId + "Mask";
  document.body.appendChild(messageBoxMask);
 }, 
 
 show : function(title, message){
  //只传如一个参数的情况
  if(!message){
   //警告显示
   this.alert(title);
  }
  this._title = title;
  this._message = message;
  this.popup();
 },
 
 //模仿系统alert
 alert : function(message){
  this._title = "来自页面的提示信息";
  this._message = message;
  this.popup();
 },
 
 //弹出窗口
 popup : function() {
  $(this._titleId).innerHTML = this._title;
  $(this._messageId).innerHTML = this._message;
  if(isIE){
   $(this._boxId).style.pixelWidth = this._boxWidth;
   //控制高度
   //$(this._boxId).style.pixelHeight = this._boxHeight;
   //控制最小宽度
   //$(this._boxId).style.minHeight = this._boxHeight;
   $(this._boxId).style.pixelLeft = Math.ceil(document.body.clientWidth - this._boxWidth) / 2;
  //尚未实现
   $(this._boxId).style.pixelTop = Math.ceil(Math.abs((document.body.clientHeight - this._boxHeight) / 2)) + document.body.scrollTop;
   //设置遮罩属性
   $(this._boxId + "Mask").style.pixelWidth = document.body.clientWidth;
   $(this._boxId + "Mask").style.pixelHeight = document.body.clientHeight;
  }
  else{
   $(this._boxId).style.width = this._boxWidth + "px";
   $(this._boxId).style.left = Math.ceil((document.body.clientWidth - this._boxWidth) / 2) + "px";
      //尚未实现
   $(this._boxId).style.top = Math.ceil(Math.abs((document.body.clientHeight - this._boxHeight) / 2)) + document.body.scrollTop + "px";
   //设置遮罩属性
   $(this._boxId + "Mask").style.width = document.body.clientWidth + "px";
   $(this._boxId + "Mask").style.height = document.body.clientHeight + "px";
  }
  
  //隐藏选择框
  this.hiddeSelect();
  //显示提示窗口
  $(this._boxId).style.display = "block";
  //显示遮罩层
  $(this._boxId + "Mask").style.display = "block";
 },
 
 close : function(message){
  $(this._boxId).style.display = "none";
  $(this._boxId + "Mask").style.display = "none";
  
  //恢复选择框
  this.showSelect();
 },
 
 //Ok按钮CallBack
 btnOk : function(){
  this.close();
  return true;
 },
 
 //取消按钮CallBack
 btnCancel : function(){
  this.close();
  return false;
 },
 
 //创建按钮
 createButton : function(caption , callback){
  //追加按钮
  var button = document.createElement("a");
  button.innerHTML = caption;
  button.className = "button";
  button.onclick = Bind(this, callback);
  return button;
 },
 
 //以下代码用于选择框（SELECT）的控制，适用于IE6及以下版本
 //隐藏选择框
 hiddeSelect : function(){
  var sels = $(document).getElementsByTagName("select");
  Each(sels , function(sel){sel.style.visibility = "hidden";});
 },
 
 //显示选择框
 showSelect : function(){
  var sels = $(document).getElementsByTagName("select");
  Each(sels , function(sel){sel.style.visibility = "visible";});
 },
 
 //初始化消息窗口
 initMessageBox : function(){
  var container = $(this._boxId);
  //对话框标题
  var msgTop = document.createElement("h2");
  //对话框标题内容
  var msgTitle = document.createElement("span");
  //使用时间来设置唯一ID
  msgTitle.id = "MsgTitle" + new Date().getTime().toString();
  this._titleId = msgTitle.id;
  //关闭按钮
  var msgTopClose = document.createElement("a");
  msgTopClose.className="right";
  msgTopClose.onclick = Bind(this, this.close);
  msgTopClose.innerHTML="关闭";
  //追加
  //首先添加关闭按钮，居右显示
  msgTop.appendChild(msgTopClose);
  msgTop.appendChild(msgTitle);
  //添加内容元素
  var msgContent = document.createElement("p");
  msgContent.className = "content";
  //使用时间来设置唯一ID
  msgContent.id = "MsgContent" + new Date().getTime().toString();
  this._messageId = msgContent.id;
  //添加按钮
  var msgButtons = document.createElement("p");
  msgButtons.className = "buttons";
  
  //追加确定按钮
  msgButtons.appendChild(this.createButton("确定",this.btnOk));
  
  //追加取消按钮
  msgButtons.appendChild(this.createButton("取消",this.btnCancel));
  
  //追加元素
  container.appendChild(msgTop);
  container.appendChild(msgContent);
  container.appendChild(msgButtons);
 }
}

</body>
</html>