简单的遮罩

index代码:

<div id="mask" class="mask"></div>    

<href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br /> 

css样式:

 .mask {       

            position: absolute; 

            top: 0px; 

           left: 0px;  

           filter: alpha(opacity=60);

           background-color: #777;     

           z-index: 1002; 

            /*适用于IE*/   

           opacity:0.5;

            /*适用于火狐*/    

           -moz-opacity:0.5;     

       }  

js代码:

     //显示遮罩层    

    function showMask(){     

        $("#mask").css("height",$(document).height());     

       $("#mask").css("width",$(document).width());     

        $("#mask").show();     

    } 

   //隐藏遮罩层 

   function hideMask(){     

        $("#mask").hide();     

    }  

 

如果用window.location.href='url '跳转时,为了解决加载顺序问题,使用遮罩!

代码如下:

         html:

         <div class="overlay"></div>

         <div class="content">内容。。。</div>

 

        css:   

         .overlay {
                  100%;
                  height: 100%;
                  background: #fff;
                  display: none;
           }

       js:

           window.location.href = "url.html";

          //遮罩
          $('.unload').fadeIn();

      

        

 

 

         

 

 

 

原文地址:https://www.cnblogs.com/tency5005/p/10402166.html