JavaScript实现弹出DIV层同时页面背景渐变成半透亮效果_

1、JavaScript实现弹出DIV层同时页面背景渐变成半透亮效果_ 本文实例讲解并描述了JavaScript实现弹出DIV层同时页面背景渐变成半透亮效果。分享给大家供大家参考，具体如下： !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head titleJavaScript弹出DIV层，页面背景渐变成半透亮/title style html,bodyfont-size:12px;margin:0px;height:100%; .mesWin

2、dowborder:#666 1px solid;background:#fff; .mesWindowTopborder-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px; .mesWindowContentmargin:4px;font-size:12px; .mesWindow .closeheight:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;ba

3、ckground:#fff /style script var isIe=(document.all)?true:false; /设置select的可见状态 function setSelectState(state) var objl=document.getElementsByTagName(select); for(var i=0;iobjl.length;i+) objli.style.visibility=state; function mousePosition(ev) if(ev.pageX | ev.pageY) return x:ev.pageX, y:ev.pageY; r

4、eturn 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

5、.documentElement.scrollHeight); if(isIe) setSelectState(hidden); var back=document.createElement(div); back.id=back; var styleStr=top:0px;left:0px;position:absolute;background:#666;width:+bWidth+px;height:+bHeight+px; styleStr+=(isIe)?filter:alpha(opacity=0);:opacity:0; back.style.cssText=styleStr;

6、document.body.appendChild(back); showBackground(back,50); var mesW=document.createElement(div); mesW.id=mesWindow; mesW.className=mesWindow; mesW.innerHTML=div class=mesWindowToptable width=100% height=100%trtd+wTitle+/tdtd style=width:1px;input type=button onclick=closeWindow(); title=关闭窗口 class=cl

7、ose value=关闭 /td/tr/table/divdiv class=mesWindowContent id=mesWindowContent+content+/divdiv 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); /让背景慢慢变暗 f

8、unction showBackground(obj,endInt) if(isIe) obj.filters.alpha.opacity+=1; if(obj.filters.alpha.opacityendInt) 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

9、),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

10、(isIe) setSelectState(); /测试弹出 function testMessageBox(ev) var objPos = mousePosition(ev); messContent=div style=padding:20px 0 20px 0;text-align:center消息正文/div; showMessageBox(窗口标题,messContent,objPos,350); /script /head body div style=padding:20px div style=text-align:left;a href=#none onclick=testMessageBox(event);弹出窗口/a/div div style=text-align:left;padding-left:20px;padding-top:10px;select ID=Select1 NAME=Select1option下拉/option/select弹出窗口时会将其隐蔽，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框/div div style=text-align:center;a href=#none oncl