弹出层

jinyike

浏览: 29271 次
性别:
来自: 杭州

最近访客更多访客>>

dhflas

godooxEven

jiang34500

qq_30312197

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

浏览器 IE prototype J#

<div id=’"window"+id’></div> 控制背景的div，使背景逐渐变暗 
<div id=’"windowTopBg"+id’> 
<div id=’"windowTop"+id’> 
<span id=’"windowTopTitle"+id’>title</span> 
<span id=’"windowTopOperate"+id’>maxORmin</span> 
<span id=’"windowTopClose"+id’>close</span> 
</div> 
<div id=’"windowContent"+id’>content</div> 
</div> 
@author Nieger Dai 
@date 2007.11.15 
*/ 
var isIe = (document.all)?true:false; 
var moveable=false; 
var topDivBorderColor = "#336699";//提示窗口的边框颜色 
var topDivBgColor = "#6795B4";//提示窗口的标题的背景颜色 
var contentBgColor = "white";//内容显示窗口的背景颜色 
var contentFontColor = "black";//内容显示窗口字体颜色 
var titleFontColor = "white"; //弹出窗口标题字体颜色 
var index=10000;//z-index; 
// 创建弹出窗口，构造函数 
function DivWindow(id,title,w,h,content) 
{ 
this.id = id;//窗口id 
this.zIndex = index +2; 
this.title = title;//弹出窗口名称 
this.message = content;//弹出窗口内容 
this.width = w;//弹出窗口宽度 
this.height = h;//弹出窗口高度 
this.left = (document.body.clientWidth) ? (document.body.clientWidth - this.width)/2 : 0;//弹出窗口位置，距屏幕左边的位置 
this.top = (document.body.clientHeight) ? (document.body.clientHeight - this.height)/2 : 0;//弹出窗口位置，距屏幕上边的位置 
//this.init = init; 
//this.init(); 
} 
//根据构造函数设定初始值，创建弹出窗口 
DivWindow.prototype = { 
//设置弹出窗口标题字体颜色 
setPopupTopTitleFontColor:function(tFontColor) 
{ 
titleFontColor = tFontColor; 
}, 
//设置弹出窗口标题背景颜色 
setPopupTopBgColor:function(tBgColor) 
{ 
topDivBgColor = tBgColor; 
}, 
//设置弹出窗口风格,包括标题栏的背景，弹出窗口边框颜色，内容窗体背景颜色，内容窗体字体颜色 
setPopupColor:function(borderColor,bgColor,tFontColor,cBgColor,fColor) 
{ 
topDivBorderColor = borderColor; 
topDivBgColor = bgColor; 
titleFontColor = tFontColor; 
contentBgColor = cBgColor; 
contentFontColor = fColor; 
}, 
//打开一个弹出窗口 
open: function() 
{ 
var sWidth,sHeight; 
sWidth=document.body.clientWidth; 
sHeight=document.body.clientHeight; 
var bgObj=document.createElement("div"); 
bgObj.setAttribute(’id’,’window’+this.id); 
var styleStr="top:0px;left:0px;position:absolute;background:#245;width:"+sWidth+"px;height:"+sHeight+"px;"; 
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;"; 
bgObj.style.cssText=styleStr; 
document.body.appendChild(bgObj); 
//让背景逐渐变暗 
showBackground(bgObj,25); 
// 弹出窗口框体背景容器 
var windowTopBgDiv = document.createElement("div"); 
windowTopBgDiv.setAttribute(’id’,’windowTopBg’+this.id); 
windowTopBgDiv.style.position = "absolute"; 
windowTopBgDiv.style.zIndex = this.zIndex ; 
windowTopBgDiv.style.width = this.width ; 
windowTopBgDiv.style.height = this.height; 
windowTopBgDiv.style.left = this.left; 
windowTopBgDiv.style.top = this.top; 
windowTopBgDiv.style.background = topDivBgColor; 
windowTopBgDiv.style.fontSize = "9pt"; 
windowTopBgDiv.style.cursor = "default"; 
windowTopBgDiv.style.border = "1px solid " + topDivBorderColor; 
windowTopBgDiv.attachEvent("onmousedown",function(){ 
if(windowTopBgDiv.style.zIndex!=index) 
{ 
index = index + 2; 
var idx = index; 
windowTopBgDiv.style.zIndex=idx; 
} 
}); 
// 弹出窗口头部框体 
var windowTopDiv = document.createElement("div"); 
windowTopDiv.setAttribute(’id’,’windowTop’+this.id); 
windowTopDiv.style.position = "absolute"; 
windowTopDiv.style.background = topDivBgColor;//"white"; 
windowTopDiv.style.color = titleFontColor; 
windowTopDiv.style.cursor = "move"; 
windowTopDiv.style.height = 20; 
windowTopDiv.style.width = this.width-2*2; 
//开始拖动; 
windowTopDiv.attachEvent("onmousedown",function(){ 
if(event.button==1) 
{ 
//锁定标题栏; 
windowTopDiv.setCapture(); 
//定义对象; 
var win = windowTopDiv.parentNode; 
//记录鼠标和层位置; 
x0 = event.clientX; 
y0 = event.clientY; 
x1 = parseInt(win.style.left); 
y1 = parseInt(win.style.top); 
//记录颜色; 
//topDivBgColor = windowTopDiv.style.backgroundColor; 
//改变风格; 
//windowTopDiv.style.backgroundColor = topDivBorderColor; 
win.style.borderColor = topDivBorderColor; 
moveable = true; 
} 
}); 
//停止拖动 
windowTopDiv.attachEvent("onmouseup",function(){ 
if(moveable) 
{ 
var win = windowTopDiv.parentNode; 
win.style.borderColor = topDivBgColor; 
windowTopDiv.style.backgroundColor = topDivBgColor; 
windowTopDiv.releaseCapture(); 
moveable = false; 
} 
}); 
// 开始拖动 
windowTopDiv.attachEvent("onmousemove",function(){ 
if(moveable) 
{ 
var win = windowTopDiv.parentNode; 
win.style.left = x1 + event.clientX - x0; 
win.style.top = y1 + event.clientY - y0; 
} 
}); 
// 双击弹出窗口 
windowTopDiv.attachEvent("ondblclick",function(){ 
maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv); 
}); 
//增加一个弹出窗口标题的显示 
var windowTopTitleSpan = document.createElement("span"); 
windowTopTitleSpan.setAttribute(’id’,’windowTopTitle’+this.id); 
windowTopTitleSpan.style.width = this.width-2*12-4; 
windowTopTitleSpan.style.paddingLeft = "3px"; 
windowTopTitleSpan.innerHTML = this.title; 
//增加一个弹出窗口最小化，最大化的操作 
var windowTopOperateSpan = document.createElement("span"); 
windowTopOperateSpan.setAttribute(’id’,’windowTopOperate’+this.id); 
windowTopOperateSpan.style.width = 12; 
windowTopOperateSpan.style.borderWidth = "0px"; 
windowTopOperateSpan.style.color = titleFontColor;//"white"; 
windowTopOperateSpan.style.fontFamily = "webdings"; 
windowTopOperateSpan.style.cursor = "default"; 
windowTopOperateSpan.innerHTML = "0"; 
//最大化或者最小化弹出窗口操作 
windowTopOperateSpan.attachEvent("onclick",function(){ 
maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv); 
}); 
//增加一个弹出窗口关闭的操作 
var windowTopCloseSpan = document.createElement("span"); 
windowTopCloseSpan.setAttribute(’id’,’windowTopClose’+this.id); 
windowTopCloseSpan.style.width = 12; 
windowTopCloseSpan.style.borderWidth = "0px"; 
windowTopCloseSpan.style.color = titleFontColor;//"white"; 
windowTopCloseSpan.style.fontFamily = "webdings"; 
windowTopCloseSpan.style.cursor = "default"; 
windowTopCloseSpan.innerHTML = "r"; 
// 关闭窗口 
windowTopCloseSpan.attachEvent("onclick",function(){ 
windowTopDiv.removeChild(windowTopTitleSpan); 
windowTopDiv.removeChild(windowTopOperateSpan); 
windowTopDiv.removeChild(windowTopCloseSpan); 
windowTopBgDiv.removeChild(windowTopDiv); 
windowTopBgDiv.removeChild(windowContentDiv); 
document.body.removeChild(windowTopBgDiv); 
document.body.removeChild(bgObj); 
}); 
// 内容 
var windowContentDiv = document.createElement("div"); 
windowContentDiv.setAttribute(’id’,’windowContent’+this.id); 
windowContentDiv.style.background = contentBgColor; 
windowContentDiv.style.color = contentFontColor; 
windowContentDiv.style.cursor = "default"; 
windowContentDiv.style.height = (this.height - 20 - 4); 
windowContentDiv.style.width = "100%"; 
windowContentDiv.style.position = "relative"; 
windowContentDiv.style.left = 0; 
windowContentDiv.style.top = 24; 
windowContentDiv.style.lineHeight = "20px"; 
windowContentDiv.style.fontSize = "10pt"; 
windowContentDiv.style.wordBreak = "break-all"; 
windowContentDiv.style.padding = "3px"; 
windowContentDiv.innerHTML = this.message; 
//将内容写入到文件中 
windowTopDiv.appendChild(windowTopTitleSpan); 
windowTopDiv.appendChild(windowTopOperateSpan); 
windowTopDiv.appendChild(windowTopCloseSpan); 
windowTopBgDiv.appendChild(windowTopDiv); 
windowTopBgDiv.appendChild(windowContentDiv); 
document.body.appendChild(windowTopBgDiv); 
} 
} 
//最大或者最小化探出窗口 
function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv) 
{ 
var win = windowTopOperateSpan.parentNode.parentNode; 
var tit = windowTopOperateSpan.parentNode; 
var flg = windowContentDiv.style.display=="none"; 
if(flg) 
{ 
win.style.height = parseInt(windowContentDiv.style.height) + parseInt(tit.style.height) + 2*2; 
windowContentDiv.style.display = "block"; 
windowTopOperateSpan.innerHTML = "0"; 
} 
else 
{ 
win.style.height = parseInt(tit.style.height) + 2*2; 
windowTopOperateSpan.innerHTML = "2"; 
windowContentDiv.style.display = "none"; 
} 
} 
//让背景渐渐变暗 
function showBackground(obj,endInt) 
{ 
if(isIe) 
{ 
obj.filters.alpha.opacity+=1; 
if(obj.filters.alpha.opacity<endInt) 
{ 
setTimeout(function(){this.showBackground(obj,endInt)},5); 
} 
} 
else 
{ 
var al=parseFloat(obj.style.opacity);al+=0.01; 
obj.style.opacity=al; 
if(al<(endInt/100)) 
{ 
setTimeout(function(){this.showBackground(obj,endInt)},5); 
} 
} 
} 
//关闭弹出窗口 
function closeDivWindow(id) 
{ 
var windowTopTitleSpan = document.getElementById("windowTopTitle"+id); 
var windowTopOperateSpan = document.getElementById("windowTopOperate"+id); 
var windowTopCloseSpan = document.getElementById("windowTopClose"+id); 
var windowTopDiv = document.getElementById("windowTop"+id); 
var windowTopBgDiv = document.getElementById("windowTopBg"+id); 
var windowContentDiv = document.getElementById("windowContent"+id); 
var bgObj = document.getElementById("window"+id); 
windowTopDiv.removeChild(windowTopTitleSpan); 
windowTopDiv.removeChild(windowTopOperateSpan); 
windowTopDiv.removeChild(windowTopCloseSpan); 
windowTopBgDiv.removeChild(windowTopDiv); 
windowTopBgDiv.removeChild(windowContentDiv); 
document.body.removeChild(windowTopBgDiv); 
document.body.removeChild(bgObj); 
}

<!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>alertWindow test</title>
<script language=”javascript”>
function alertWin(title, msg, w, h){
var s=document.getElementsByTagName(“select”); //获取所有的select标签
for(var j=0;j<s.length;j++){s[j].style.display=”none”;} //因为在IE里的下拉菜单在弹出层中的是不会透明的，所以先把它设为不显示，再进行下面操作
var titleheight = “22px”; // 提示窗口标题高度
var bordercolor = “#666699″; // 提示窗口的边框颜色
var titlecolor = “#FFFFFF”; // 提示窗口的标题颜色
var titlebgcolor = “#666699″; // 提示窗口的标题背景色
var bgcolor = “#FFFFFF”; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth; // 获取网页可见区域宽
var iHeight = document.documentElement.clientHeight; // 获取网页可见区域高
var bgObj = document.createElement(“div”); // 新建一个DIV，作为弹出层的背景
bgObj.style.cssText = “position:absolute;left:0px;top:0px;width:”+iWidth+”px;height:”+Math.max(document.body.clientHeight, iHeight)+”px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;”; // 为新建的DIV设置样式
document.body.appendChild(bgObj); // 把新建的DIV放在BODY中
var msgObj=document.createElement(“div”); // 再新建一个DIV，作为弹出的对话窗口
msgObj.style.cssText  = “position:absolute;font:11px ‘宋体’;top:”+(iHeight-h)/2+”px;left:”+ (iWidth-w)/2+”px;width:”+w+”px;height:”+h+”px;text-align:center;border:1px solid “+bordercolor+”;background-color:”+bgcolor+”;padding:1px;line-height:22px;z-index:102;”; // 为新建的DIV设置样式
document.body.appendChild(msgObj); // 把新建的DIV也放到BODY中
var table = document.createElement(“table”); // 新建一个TBALE
msgObj.appendChild(table); // 把新建的TABLE放到弹出窗口的DIV中
table.style.cssText = “margin:0px;border:0px;padding:0px;”; // 为其设置样式
table.cellSpacing = 0; // 为新建的TABLE设置单元距离
var tr = table.insertRow(-1); // 在TABLE中插入一行
var titleBar = tr.insertCell(-1); // 在一行中插入一列
titleBar.style.cssText  = “width:100%;height:”+titleheight+”px;text-align:left;padding:3px;margin: 0px;font:bold 13px ‘宋体’;color:”+titlecolor+”;border:1px solid ” +  bordercolor + “;cursor:move;background-color:” + titlebgcolor; // 为第一列设置样式
titleBar.style.paddingLeft = “10px”; // 设置样式
titleBar.innerHTML = title; // 为第一列填充文字
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove; // 把未定义的鼠标移动事件放在一个变量中，为事件还原作准备
var docMouseUpEvent = document.onmouseup; // 把未定义的鼠标释放事件放在一个变量中，为事件还原作准备
titleBar.onmousedown = function() { //  首先定义鼠标按下的事件
var evt = getEvent(); // 获得事件对象
moveable = true; // 设置是否可移动弹出框
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top); // 获取弹出框上边的位置
moveLeft = parseInt(msgObj.style.left); // 获取弹出框左边的位置
document.onmousemove = function() { // 在鼠标按下的事件中再定义鼠标移动的事件
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX – moveX; // 计算相对左边移动的操作＝当前弹出框左边的位置＋鼠标移动到的位置－鼠标按下的位置
var y = moveTop + evt.clientY – moveY; // 计算相对上边移动的操作＝当前弹出框上边的位置＋鼠标移动到的位置－鼠标按下的位置
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) { // 当鼠标有移动并且移动的位置在可视页面内，就执行操作
msgObj.style.left = x + “px”; // 把弹出框定位在相对左边的位置
msgObj.style.top = y + “px”; // 把弹出框定位在相对上边的位置
}
}
};
document.onmouseup = function () { // 定义释放鼠标的事件
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
var closeBtn = tr.insertCell(-1); // 在TABLE第一行插入第二列
closeBtn.style.cssText = “cursor:pointer; padding:2px;background-color:” + titlebgcolor; // 为新列设置样式
closeBtn.innerHTML = “<span style=’font-size:15pt; color:”+titlecolor+”;’>×</span>”; // 在新列中填充内容
closeBtn.onclick = function(){ // 为关闭按钮设置点击事件
for(var j=0;j<s.length;j++){s[j].style.display=”";} // 先把隐藏的下拉菜单显示出来
document.body.removeChild(bgObj); // 移除背景DIV
document.body.removeChild(msgObj); // 移除弹出框DIV
}
var msgBox = table.insertRow(-1).insertCell(-1); // 在TABLE中插入第二行
msgBox.style.cssText = “font:10pt ‘宋体’;”; // 设置样式
msgBox.colSpan  = 2; // 合并两列
msgBox.innerHTML = msg; // 为插入的行填充内容
// 获取事件Event对象，用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<input type=”button” value=”点这里”
onclick=”alertWin(‘标题’,'这里是内容’,300,200);” />
<select>
<option>兼容浏览器FF</opation>
<option>兼容浏览器IE</opation>
<option>兼容浏览器SF</opation>

</select>
</body>
</html>