Jquery超簡單遮罩層實現代碼

時間  2019-11-06
標籤 jquery 簡單 實現 代碼 欄目 JQuery 简体版
原文   原文鏈接

在開發中，爲了不二次提交，遮罩層的運用愈來愈廣泛javascript

看了不少代碼，下面跟你們分享一下我認爲最簡單的遮罩層實現方式：css

1.樣式以下設置：html

CSS代碼：java

[html]  view plain  copy
 
  1. <style type="text/css">     
  2.     .mask {       
  3.             position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;     
  4.             z-index: 1002; left: 0px;     
  5.             opacity:0.5; -moz-opacity:0.5;     
  6.         }     
  7. </style>    


其中： opacity:0.5;適用於IE， -moz-opacit:0.5;適用於火狐；你只須要都加上，即可以火狐和IE下均可以使用。ajax

2.指定層的高度、和寬度。ide

js代碼spa

[javascript]  view plain  copy
 
  1. <pre class="html" name="code"><script type="text/javascript">     
  2.     //兼容火狐、IE8   
  3.     //顯示遮罩層    
  4.     function showMask(){     
  5.         $("#mask").css("height",$(document).height());     
  6.         $("#mask").css("width",$(document).width());     
  7.         $("#mask").show();     
  8.     }  
  9.     //隱藏遮罩層  
  10.     function hideMask(){     
  11.           
  12.         $("#mask").hide();     
  13.     }  
  14.      
  15. </script>  

 

 

3.在<body>中加入以下代碼，而後就能夠看效果了：.net
 

html代碼code
 

 
 
 
  
 
   [html]  
   view plain 
    copy 
   

       
   
 
  
 
 
 
 
     
  
  1. <div id="mask" class="mask"></div>    
    2.  
  
  2. <a href="javascript:;" onclick="showMask()" >點我顯示遮罩層</a><br />  
    3.  
 
 

 


4.使用方法：xml
 

在ajax提交表單後，加上showMask方法，數據返回後，加上hideMask()
 

須要的親們能夠根據本身需求，在遮罩層上面加一些提示信息


        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程