【www.bbyears.com--js教程】
相信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代码
代码如下
<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程序:
目前本程序已在IE6以上,FF2以上版本调试通过!";
//使用自定义标题
//msgbox.show("这是测试标题" , msg);
//使用默认标题
msgbox.alert(msg);
}
</script>
这里是遮罩层,与页面内容同高