兼容各种浏览器、屏蔽下拉框的遮照层
遮照层样式:
/*背景层*/
.bjLayer{position:absolute;left:0px;top:0px;z-index:99999;
background-color:#333333;width:100%;height:100%;}?
/*显示内容*/
.msgbox{position: absolute;height:auto;font-size:12px;top:50%;left:50%;}????
?
脚本:
?/*******************************************************************************************
??????? * Creation date: 2010-10-13
??????? http://www.51gouqu.com
???????
??????? * 下面的内容可以拷贝到一个JS文件里面
??????? *********************************************************************************************/
??????? var Timer = null;
??????? /* 提示对话框?*/
??????? /*参数:背景层ID,内容层ID*/
??????? function MessageBox(bjLayer,MessageBox){
????????
??????? //解决 火狐浏览器 下会复位
??????? ScrollTop = GetBrowserDocument().scrollTop;
??????? ScrollLeft = GetBrowserDocument().scrollLeft;
??????? GetBrowserDocument().style.overflow = "hidden";
??????? GetBrowserDocument().scrollTop = ScrollTop;
??????? GetBrowserDocument().scrollLeft = ScrollLeft;???????????
????????
??????? OpacityValue = 0;
??????? S(MessageBox).style.display = "block";???
??????? try{S(bjLayer).filters("alpha").opacity = 0;}catch(e){};
??????? S(bjLayer).style.opacity = 0;
??????? S(bjLayer).style.display = "block";
??????? S(bjLayer).style.height = GetBrowserDocument().scrollHeight + "px";
??????? S(bjLayer).style.width = GetBrowserDocument().scrollWidth + "px";
??????? Timer = setInterval("DoAlpha('"+bjLayer+"')",1);
??????? //设置内容层位置
??????? S(MessageBox).style.width = "515px"; /*自己根据显示内容的宽度来设置*/??
??????? S(MessageBox).style.marginTop = (-S(MessageBox).offsetHeight/2 + GetBrowserDocument().scrollTop) + "px";
??????? S(MessageBox).style.marginLeft = (-S(MessageBox).offsetWidth/2 + GetBrowserDocument().scrollLeft) + "px";
????????
??????? }
??????? var OpacityValue = 0;
??????? var ScrollTop = 0;
??????? var ScrollLeft = 0;
??????? /*获取 多种浏览器下页面的高度 宽度*/
??????? function GetBrowserDocument()
??????? {
??????? var _dcw = document.documentElement.clientHeight;
??????? var _dow = document.documentElement.offsetHeight;
??????? var _bcw = document.body.clientHeight;
??????? var _bow = document.body.offsetHeight;
??????? if(_dcw == 0) return document.body;
??????? if(_dcw == _dow) return document.documentElement;
??????? if(_bcw == _bow && _dcw != 0)
??????????? return document.documentElement;
??????? else
??????????? return document.body;
??????? }
??????? /*设置背景层透明度*/
??????? function SetOpacity(obj,opacity){
?????????????? if(opacity >=1 ) opacity = opacity / 100;
????????????????
?????????????? try{obj.style.opacity = opacity; }catch(e){}
?????????????
?????????????? try{
???????????????? if(obj.filters){
??????????????????? obj.filters("alpha").opacity = opacity * 100;
???????????????? }
????????????????
?????????????? }catch(e){}
??????? }
??????? /*设置背景层透明度渐变效果*/
??????? function DoAlpha(bjLayer){
??????? if (OpacityValue > 20){clearInterval(Timer);return 0;}
?????????? OpacityValue += 5;
?????????? SetOpacity(S(bjLayer),OpacityValue);
??????? }
??????? /*关闭遮照层*/
??????? function CloseMessageBox(bjLayer,MessageBox)
??????? {?
??????????? S(MessageBox).style.display = "none";
??????????? S(bjLayer).style.display = "none";???
??????????? GetBrowserDocument().style.overflow = "";
??????????? GetBrowserDocument().scrollTop = ScrollTop;
??????????? GetBrowserDocument().scrollLeft = ScrollLeft;
??????? }
??????? /*建议不要使用 $ 名称 避免跟jquery 中的$函数冲突*/
??????? function S(obj){
??????? return document.getElementById(obj);
??????? }
///////////////////////////////////////////////////////////////////////////////////////
?
?
页面调用:
??? function showTip() {
??????????? MessageBox("_bjLayer","_msgbox");
?????????? }????
????? function closeTip() {
??????????? CloseMessageBox("_bjLayer","_msgbox");
??????????? //setTimeout("visit()",1000);
?????????? }?
?
页面:
<body>
??? <div id="_bjLayer" style="filter: alpha(opacity=0); display: none;">? </div>
??? <div style="display: none; z-index: 100000;" id="_msgbox">
???欢迎来到<a href=http://www.51gouqu.com>51购趣网</a>,享受购物的乐趣
???????? 可以遮住下拉框哦~~
??????? <input type="button" value="试试看"? onclick="closeTip()"/>
??? </div>
???? <input type="button" value="显示遮照层"? onclick="showTip()"/>
???? <select >
????? <option value="1" selected="selected">遮照层1</option>
????? <option value="2" >遮照层2</option>
????? <option value="3">遮照层3</option>
???? </select>
</body>
</html>
?
?
