兼容各种浏览器、屏蔽上拉框的遮照层

兼容各种浏览器、屏蔽下拉框的遮照层

遮照层样式:

/*背景层*/

.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);
           }

页面:

   欢迎来到<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>

兼容各种浏览器、屏蔽上拉框的遮照层

相关推荐