弹出层效果，背景变暗

前端

我把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=“
“+wTitle+“
“+content+“
“; 

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=“
中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态中国配偶国际征婚交友网络最新动态
“; 
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
>
昵
 
称：

lable
><
input 
type
=”text”
 size
=”20″
 name
=”test”
 
/><
br 
/><
br 
/>


<
lable
>
密
 
码：

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”
>
 

div
>


<
div 
id
=”WindowDIV”
>
     
    
<%

@ include file=“../examination/openEditerDiv.jsp“
%>



div
>