弹出层效果，背景变暗

我把js做成一个文件保存为msg.js文件：

代码如下：

//  JavaScript Document
var  isIe = (document.all) ? true : false ; 
// 设置select的可见状态 
function  setSelectState(state) 
... { 
var objl=document.getElementsByTagName('select'); 
for(var i=0;i<objl.length;i++) 
...{ 
objl[i].style.visibility=state; 
} 
}  
function  mousePosition(ev) 
... { 
if(ev.pageX || ev.pageY) 
...{ 
return ...{x:ev.pageX, y:ev.pageY}; 
} 
return ...{ 
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop 
}; 
}  
// 弹出方法 
function  showMessageBox(wTitle,content,pos,wWidth) 
... { 
closeWindow(); 
var bWidth=parseInt(document.documentElement.scrollWidth); 
var bHeight=parseInt(document.documentElement.scrollHeight); 
if(isIe)...{ 
setSelectState('hidden');} 
var back=document.createElement("div"); 
back.id="back"; 
var styleStr="top:0px;left:0px;position:absolute;background:#003973;width:"+bWidth+"px;height:"+bHeight+"px;"; 
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;"; 
back.style.cssText=styleStr; 
document.body.appendChild(back); 
showBackground(back,50); 
var mesW=document.createElement("div"); 
mesW.id="mesWindow"; 
mesW.className="mesWindow"; 
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' οnclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>"; 

styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;"; 
mesW.style.cssText=styleStr; 
document.body.appendChild(mesW); 
}  
// 让背景渐渐变暗 
function  showBackground(obj,endInt) 
... { 
if(isIe) 
...{ 
obj.filters.alpha.opacity+=1; 
if(obj.filters.alpha.opacity<endInt) 
...{ 
setTimeout(function()...{showBackground(obj,endInt)},5); 
} 
}else...{ 
var al=parseFloat(obj.style.opacity);al+=0.01; 
obj.style.opacity=al; 
if(al<(endInt/100)) 
...{setTimeout(function()...{showBackground(obj,endInt)},5);} 
} 
}  
// 关闭窗口 
function  closeWindow() 
... { 
if(document.getElementById('back')!=null) 
...{ 
document.getElementById('back').parentNode.removeChild(document.getElementById('back')); 
} 
if(document.getElementById('mesWindow')!=null) 
...{ 
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow')); 
} 

if(isIe)...{ 
setSelectState('');} 
}  
// 测试弹出 
function  testMessageBox(ev) 
... { 
var objPos = mousePosition(ev); 
messContent="<div style='padding:10px;text-align:left; line-height:220%;'>中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态</div>"; 
showMessageBox('动态标题',messContent,objPos,790); 
}

调用页面代码非常简单，用鼠标onclick事件OK的拉，当然你也可以改成其他的事件：

< link  href ="sub.css"  rel ="stylesheet"  type ="text/css"   />
< script  type ='text/javascript'  src ='js/msg.js' ></ script >
< body >
< a  href ="#"  onClick ="testMessageBox(event);" > 就把内容方里面效果 </ a >
</ body >

用到的css如下：

名称是sub.css

mesWindow {...} {border:#666 1px solid;background:#fff; margin-top:50px; margin-left:40px;}  
.mesWindowTop {...} {border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  
.mesWindowContent {...} {margin:8px;font-size:12px;}  
.mesWindow .close {...} {height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  

恭喜您完成了，如果你要更改谈出层大小，被屏蔽颜色在js下更改！js带了注释！！

原理示例：

 

< HEAD >
< TITLE >  New Document  </ TITLE >

< style  type ="text/css" > ...
body{...}{
font-family: 幼圆;
}
#login{...}{
position: relative;
display: none;
top: 20px;
left: 30px;
width: 280px;
height: 150px;
background-color: #ffffff;
text-align: center;
border: solid 1px;
padding: 10px;
z-index: 1;
}
#panel{...}{
background-color: #CCFFFF;
padding: 10px;
margin: 10px;
}
</ style >
< script  type ="text/javascript" > ...
function showLogin()
...{
login.style.display = "block";
}
function showForbid()
...{
forbid.style.width = document.body.clientWidth;
forbid.style.height = document.body.clientHeight;
forbid.style.visibility = "visible";
}
function tt()
...{
   if (document.getElementById("test").value=="feng")
   ...{
   login.style.display = 'none';forbid.style.visibility = 'hidden'; void(0);
   }
}
</ script >
</ HEAD >
< BODY >
< div  id ="forbid"  style ="position: absolute; visibility: hidden; z-index: 0; top: 0px; left: 0px;
background-color: #CCCCCC; filter:Alpha(Opacity=60,style=0);" ></ div >
< a  href ="javascript:showLogin();showForbid();void(0);" > 点击登录 </ a >
< div  id ="login" >
< span > 登录 </ span >
< div  id ="panel" >
< lable > 昵 &nbsp; 称： </ lable >< input  type ="text"  size ="20"  name ="test"   />< br  />< br  />
< lable > 密 &nbsp; 码： </ lable >< input  type ="password"  size ="20" >< br  />< br  />
< input  type ="checkbox"   />< lable > 记住我 </ lable >
</ div >
< input  type ="button"  value ="登录"  onClick ="tt();"   />
< br  />
< br  />
< a  href ="javascript:login.style.display = 'none';forbid.style.visibility = 'hidden'; void(0);" > 关闭 </ a >
</ div >
</ BODY >

通用弹出层页面(兼容IE、firefox)

<% ... @ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage=""  %>
<% ... /*
            通用弹出层页面(兼容IE、firefox)
    作者：陈满森
    创建时间：2007-7-11        最后修改时间：2007-7-11
    说明：
        1.openWindows(width,height)----打开弹出层调用的函数，可控制层的宽度和高度
        2.hiddenWindows()----关闭弹出层调用函数
        3._displaySelect()----隐藏下拉框标签，因为它的优先度太高
        4.<div id="LockWindows">----用于实现屏蔽弹出层以下的页面
        5.<div id="WindowDIV">----用于显示弹出层的内容
    例子(空格自己去掉)：
        在需要弹出层的页面引用< %@ include file="../common/common_openWindows.jsp"% >
        < input type="button" onclick="openWindows('800','700');" value="编辑" / >
        < input type="button" onclick="hiddenWindows();" value="关闭" / >
*/ %>
< style  type ="text/css" > ...
#LockWindows{...}{
    position:absolute; top:10px; left:10px; background-color:#777777; z-index:2; display:none;
    /**//* Moz Family使用私有属性-moz-opacity: 0.70 */
    /**//* IE 使用私有属性filter */
    /**//* 标准属性opacity支持CSS3的浏览器（FF 1.5也支持）*/
    opacity: 0.70;
    filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=100);
    width:expression(documentElement.clientWidth < 900?(documentElement.clientWidth==0?(body.clientWidth<900?'900':'auto'):'900px'):'auto');
}
#WindowDIV{...}{position:absolute; z-index:3; background-color:#FFFFFF; border:#000000 solid 1px; display:none;}
</ style >
< script  type ="text/javascript" > ...
//隐藏下拉框，以解决下拉框优先度太高的问题，  
function _displaySelect()...{
    var selects=document.getElementsByTagName("select");//整个页面的所有下拉框
    var objWindow =  $("WindowDIV");
    var DIVselects = objWindow.getElementsByTagName("select");//整个弹出层的所有下拉框
    for(var i=0;i<selects.length;i++)...{
        if(selects[i].style.visibility)...{
            selects[i].style.visibility="";
        }else...{
            selects[i].style.visibility="hidden";
            for(var j=0; i<DIVselects.length; j++)...{
                DIVselects[j].style.visibility="";
            }
        }
    }
}
function openWindows(width,height)...{ 
    var objWindow =  $("WindowDIV");
    var objLock =  $("LockWindows");//这个是用于在IE下屏蔽内容用
    objLock.style.display="block";
    objLock.style.width=document.body.clientWidth+"px";
    objLock.style.height=document.body.clientHeight+"px";
    objLock.style.minWidth=document.body.clientWidth+"px";
    objLock.style.minHeight=document.body.clientHeight+"px";
// 判断输入的宽度和高度是否大于当前浏览器的宽度和高度
    if(width>document.body.clientWidth) width = document.body.clientWidth+"px";
    if(height>document.body.clientHeight) height = document.body.clientHeight+"px";
    objWindow.style.display='block';
    objWindow.style.width = width+"px";
    objWindow.style.height = height+"px";
// 将弹出层居中
    objWindow.style.left=(document.body.offsetWidth-width)/2+"px";
    objWindow.style.top=(document.body.offsetHeight-height)/2+"px";
    _displaySelect();
}
function hiddenWindows()...{
    $("LockWindows").style.display='none';
    $("WindowDIV").style.display='none';
    _displaySelect();
}
</ script >

< div  id ="LockWindows" > &nbsp; </ div >
< div  id ="WindowDIV" >      
     <% ... @ include file="../examination/openEditerDiv.jsp" %>
</ div >