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

www.111cn.net 更新:2013-10-24 编辑:Crese 来源:转载
这里我们使用js来模仿Lightbox效果做的一个弹出对话框效果代码,原理很简单:利用DIV的浮动和层的重叠,将对话框的Z-index设置为最高就可以了另外对于遮罩层来说,只要使遮罩层在对话框层之下,其他页面元素之上即可

相信LightBox之类的页面弹出窗口,大家在浏览的时候也应该是很常见的,实现起来也不算太困难,CG今天把在上次发布的ETP项目源代码中的JS部分提取出来,方便大家学习和使用。
实现原理:利用DIV的浮动和层的重叠,将对话框的Z-index设置为最高就可以了另外对于遮罩层来说,只要使遮罩层在对话框层之下,其他页面元素之上即可,如果需要美观的话,可以设置半透明效果。


CSS代码如下:(保存成messageBox.css)

 代码如下 复制代码

/**
*文件名:messageBox.css
*作者:李明成
*创建时间:2009-12-16
*当前版本:1.0
*最后修改时间:2009-12-16 22:00
*/

/*通用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;
}

 

js代码如下(保存成MessageBox.js)

 代码如下 复制代码

/**
*项目名:IBMETP常熟ETP主页
*文件名:MessageBox.js
*作者:李明成
*创建时间:2009-12-21
*当前版本:1.0
*最后修改时间:2009-12-23 22:00
*功能说明:实现页面中弹出消息窗口Js 封装
*/
/**以下定义全局操作函数**/
//是否是IE
var isIE = (document.all) ? true : false;

//$ 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);
 }
}

下面为完整的html代码

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>测试</title>
<link href="messageBox.css" rel="stylesheet" type="text/css" media="screen" />
<!--页面对话框-->
<script src="MessageBox.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
//对话框对象
var msgbox;
function init(){
 //初始化msg
 msgbox = new MessageBox("messageBox");
 msg = "欢迎使用和测试CG编写的网页对话框JS程序:<br />目前本程序已在IE6以上,FF2以上版本调试通过!";
 //使用自定义标题
 //msgbox.show("这是测试标题" , msg);
 //使用默认标题
 msgbox.alert(msg);
}
</script>
</head>
<body onload="init();">
这里是遮罩层,与页面内容同高
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />

</body>
</html>