HTML實作遮罩層的方法 HTML中如何使用遮罩層_HTML/Xhtml_網頁製作

Web頁面中使用遮罩層，可防止重複操作，提示loading；也可以模擬彈出模態視窗。

實現思路：一個DIV作為遮罩層，一個DIV顯示loading動態GIF圖。在下面的範例程式碼中，同時展示如何在iframe子頁面中呼叫顯示和隱藏遮罩層。

範例程式碼：

index.html

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html lang=lang=lang
=
3. 裡> ">  
頭>   元 字符集=
4. 字符集=字符集>   元 http-equiv=http-equiv=
=
5. -UA-相容" 內容="IE=edge"> 🎜>
6. 標題>HTML遮罩層標題>  
連結 rel=
7. rel=rel  href
8. ="css/index.css"> 🎜>
9. 頭>   身體>       div 
10. 類="標題"  id="標題">          
11. div class="title-外層」>               
12. 跨度
13.  🎜>>                   HTML遮罩使用   
            
14. 跨度>  
        
15. div>  
    
16. div>          div class
="body"  id="body"> 🎜>> 
17.         iframe p  名稱="iframeRight" 寬度🎜> 寬度🎜>寬度>「100%」 高度=「100%」              
捲
18. =「否>「0」               樣式=「邊框：0px；邊距：0px；溢位: 隱藏;"
  
19.             onload==
"body.html"
20. >iframe>       div>     
21.             
  
    
23. div 
id
24.  id id id id id id id id“疊> 🎜>
 
25. 類=“疊加”
>
26. div >              div 
id
27. ="加載提示"  類別="載入提示">          
img
28.  src  />
29.   
30.     div>
31.                          div 類=
32. "模態"  
id="modalDiv">>          
33.     腳本 類型 類型 型 src="js/jquery-1.10.2.js">> >>
>
34. > >> >> >腳本>       腳本 類型 類型 
型 src="js/index.js"><
35. 腳本>  

身體

>  

html>   index.css CSS 代碼 將內容複製到剪切板

1. * {   
2.     邊距：0；  
3.     填入：0;   
4. }   
5.   
6. html, body {   
7.     寬度：100%；   
8.     高：100%；  
9.     字體大小: 14px;   14px
10. ;   
11. }   
12.   
13. div.header {        寬度
14. ：100%；        高度: 100px
15. ;        下邊框: 1px  藍色;   
16. }   
17.   
18. div.title-outer {   
19.     職位: 相對;   相對
20. ;        上方
：50%；  
21.     高度: 30px
;   
22. 30px;   
23. }   
24. span.title {        文字對齊: 
25. 左;        職位: 相對
26. ;   相對;        
27. 左：3%；       
28. 上方: -50%；       字體大小: 
29. 22px;   
30. }   
31.   
32. div.body {        
寬度
33. ：100%；   
34. }   
35. .overlay {        位置：
絕對
36. ；   絕對；    ；   
37.     上方: 0px;  
    
38. 左: 0px
;  
39.     z 索引：10001；       
40. 顯示:
41. 無;   無;        過濾器：alpha（不透明度= 60）；   
42.     
43. 背景顏色: 
44. #777;   #777;    ;        不透明度：0.5；        -moz-不透明度：0.5；    }  
45. .loading-tip {   
46.     z 索引：10002；  
47.     位置：固定；   固定
48. ；        顯示:無
;   
49. 無;   
}   
51. .loading-tip img {        寬度
:
52. 100px;       高度:
53. 100px;  
}   
54.   
55. .modal {        位置：
絕對
56. ；   絕對；    ；   
57.     寬度: 600px;   
    
58. 高度: 360px;        邊框: 
59. 1px  0, 0, 0.2);        盒子陰影：0px 3px
60.  3px 0, 0, 0, 0.5);        顯示
61. : 無;   無
;   
62.     z 索引：10003；  
    
63. 邊框
-半徑：
64. 6px
；   

}   

  

index.js JavaScript 程式碼 將內容複製到剪切板

1. function rightIFrameLoad(iframe) {   
2.     var pHeight = getWindowInnerHeight() - $('. ;           
3.     $(
4. 'div.body').height(pHeight);        console.log(pHeight);   
5.        
6. }   
7.   
9. // 瀏覽器相容 取得瀏覽器視覺區高度   
10. function getWindowInnerHeight() {        
11. var winHeight = window.innerHeight                || (document.documentElement && document.documentElement.clientHeight)   
12.             || (document.body && document.body.clientHeight);   
13.     
14. return winHeight;           
15. }   
16.   
18. // 瀏覽器相容 取得瀏覽器視覺區寬度   
19. function getWindowInnerWidth() {        
20. var winWidth = window.innerWidth                || (document.documentElement && document.documentElement.clientWidth)   
            || (document.body && document.body.clientWidth);   
    
23. return winWidth;   
       
}   
  
27. /** 
28.  * 顯示遮罩層  
29.  */  
30. function showOverlay() {   
    
31. // 遮罩層寬高分別為頁面內容的寬高   
    $(
32. '.overlay').css({'height':$()>. height(),'width':$(document).width()});   
    $(
33. '.overlay').show();   
}  
34.   
35. /** 
36.  * 顯示Loading提示  
37.  */  
38. function showLoading() {   
39.     // 先顯示遮罩層   
40.     showOverlay();   
41.     // Loading提示視窗居中   
42.     $("#loadingTip").css('top'
            (getWindowInnerHeight() - $(
43. "#loadingTip""#loadingTip");   
    $(
44. "#loadingTip").css('left'             (getWindowInnerWidth() - $(
"#loadingTip"
45. "#loadingTip""#loadingTip");   
46.                
47.     $("#loadingTip").show();   
48.     $(document).scroll(function() {   
49.         return false;     });   
50. }   
51.   
53. /** 
 * 隱藏Loading提示
54.  
 */
55.   
56. function hideLoading() {        $(
57. '.overlay').hide();        $(
58. "#loadingTip").hide();        $(document).scroll(
59. function() {            
60. return true true;
61.     });   
62. }  
63.   
64. /** 
65.  * 模擬彈出模態視窗DIV  
66.  * @param innerHtml 模態視窗HTML內容  
67.  */  
68. function showModal(innerHtml) {   
69.     // 取得顯示模擬模態視窗使用DIV   
70.     var dialog = $('#modalDiv''#modalDiv'
71.        
72.     // 設定內容   
73.     dialog.html(innerHtml);   
74.        
75.     // 模態視窗DIV窗口居中   
76.     dialog.css({   
77.         'top' : (getWindowInnerHeight() - dialog.height()) : (getWindowInnerHeight() - . ,            
78. 'left' : (getWindowInnerWidth() - dialog.wid()p. 🎜>     });           
79.     
80. // 窗口DIV圓角   
81.     dialog.find('.modal-container').css(
82. 'border-radius' '6px');                
83. // 模態視窗關閉按鈕事件   
84.     dialog.find('.btn-close').click(
85. function).click(function >         closeModal();   
    });   
       
    
88. // 顯示遮罩層
  
89.     showOverlay();   
       
    
91. // 顯示遮罩層
  
92.     dialog.show();   
}   
  
95. /** 
96.  * 模擬關閉模態視窗DIV  
97.  */  
98. function
 closeModal() {   
99.     $('.overlay'
).hide();   
100.     $('#modalDiv'
).hide();   
101.     $('#modalDiv'
).html(
102. ''); }   

     body.html

     XML/HTML Code複製內容到剪貼簿

     1. html>  
     2. html lang=lang=lang
     =
     3. 裡> ">  
     頭>   元 字符集=
     4. 字符集=字符集>   元 http-equiv=http-equiv=
     =
     5. -UA-相容" 內容="IE=edge"> 🎜>
     6. 標題>正文頁面標題>  
     7. 樣式 
     8. 類型=
     9. "text/ css ">
     10.   
     11. * {   
     12.     邊距：0；   
     13.     填充：0；   
     14. }   
     15.   
     16. html, body {   
     17.     寬度：100%；   
     18.     高度：100%；   
     19. }   
     20.   
     21. .outer {   
     22.     寬度：200 像素；   
     23.     高度：120 像素；   
     24.     職位：親；   
     25.     上方：50%；   
     26.     左：50%；   
     27. }   
     28.   
     29. .inner {   
     30.     寬度：200 像素；   
     31.     高度：120 像素；   
     32.     職位：親屬；   
     33.     上方： -50%；   
     34.     左：-50%；   
     35. }   
     36.   
     37. .button {   
     38.     寬度：200 像素；   
     39.     高度：40 像素；   
     40.     職位：親；   
     41. }   
     42.     
     43. .button#btnShowLoading {   
     44.     上方：0；   
     45. }       .button#btnShowModal {        上方：30%；    }  
     46.   
     47. style>  
     48. script type=type=type=>
     49.   
     50.        
     51.     function showOverlay() {   
     52.         // 呼叫父視窗顯示遮罩層和Loading提示   
     53.         window.top.window.showLoading();   
     54.   
     55.         // 使用定時器模擬關閉Loading提示   
     56.         setTimeout(function() {   
     57.             window.top.window.hideLoading();   
     58.         }, 3000);   
     59.   
     60.     }   
     61.   
     62.     function showModal() {   
     63.         // 呼叫父視窗方法模擬彈出式模態視窗   
     64.         window.top.showModal($('#modalContent').html());        }  
     65.        
     66. script>  
     67. head>  
     68. body>  
     69.     div class='outer'>  
     70.         div class='inner'>  
     71.             button class='button' onclick> >'showOverlay();'>點選彈出遮罩層buttonbuttonbuttonbutton>   
     72.             
     buttonbuttonbutton class='button' onclick> >'showModal();'>點選彈出模態視窗buttonbuttonbutton
     73.            
     div
     74. >       
     div
     75. >
       
     76.   
     77.                    div id='modalContent'
      
     78. style='display: none;'>         
     div class='modal-container ' 
     79. style='width: 100%;height: 100%;background-color: white;'>               div>
       
     80.                 ssss'字體-尺寸：36 像素； 寬度：100%； 文字對齊：居中； 顯示：內聯區塊； 職位：繼承； 左：-50%；上：-50%；'>模態視窗1跨度
     81. >               div
     82. >             按鈕 ' 樣式='寬度：100px; 高度：30 像素；  位置：絕對； 右：30 像素； '>關閉按鈕> > >
     83.         div>
     84.        div>
     85.           腳本 類型 類型 型 src="js/jquery-1.10.2.js"
     86. >> >> >>
     87. >> >> >腳本>
     88.   

     身體

     >
       

     

     

     html
     >

       

       

     運行結果： 初始化 顯示遮罩層和載入提示 顯示遮罩層和模擬彈出模態視窗 以上就是本文的全部內容，希望對大家的學習有所幫助。 譯：http://www.cnblogs.com/haoqipeng/p/html-overlay.html