HTML에서 마스크 레이어를 구현하는 방법 HTML_HTML/Xhtml_웹페이지 제작에서 마스크 레이어를 사용하는 방법

웹 페이지에서 마스크 레이어를 사용하면 반복 작업을 방지하고 팝업 모달 창을 시뮬레이션할 수도 있습니다.

구현 아이디어: 하나의 DIV는 마스크 레이어 역할을 하고, 하나의 DIV는 로딩되는 동적 GIF 이미지를 표시합니다. 다음 샘플 코드에서는 iframe 하위 페이지에서 표시 및 숨기기 마스크 레이어를 호출하는 방법도 보여줍니다.

샘플 코드:

index.html

XML/HTML 코드클립보드에 콘텐츠 복사

1. html>  
2. html lang="zh- CN">  
3. 머리>  
4. 메타 문자 집합="utf- 8">  
5. 메타 http-equiv=" X-UA 호환" 콘텐츠="IE=edge">  
6. 제목>HTML遮罩层제목>  
7. 링크 rel="스타일시트"  href="css/index.css">  
8. 머리>  
9. 몸>  
10.     div class="header"  id="헤더">  
11.         div class="title- 외부">  
12.            스팬 클래스="제목" >  
13.                 HTML遮罩层使용   
14.             스팬>  
15.         div>  
16.     div>  
17.     div class="body"  id="본문">  
18.         iframe id="iframeRight"  이름="iframeRight" 너비="100%" 높이="100%"  
19.            스크롤="아니요" 프레임 테두리="0"  
20.            스타일="테두리: 0px;여백: 0px; 패딩: 0px; 너비: 100%; 높이: 100%;오버플로 : 숨김;"  
21.            온로드="rightIFrameLoad(this)" src="body.html">iframe>  
22.     div>  
23.        
24.       
25.     div id="오버레이"  클래스="오버레이">div>  
26.       
27.     div class="modal"  id="modalDiv">div>  
28.        
29.     스크립트 유형='text/ javascript' src="js/jquery-1.10.2.js"> 스크립트>  
30.     스크립트 유형="text/ javascript" src="js/index.js">< ;/스크립트>  
31. 몸>  
32. html>  

index.css

CSS 코드复复内容到剪贴板

1. * {   
2.     여백: 0;   
3.     패딩: 0;   
4. }   
5.   
6. html, 본문 {   
7.     너비: 100%;   
8.     높이: 100%;   
9.     글꼴 크기: 14px;   
10. }   
11.   
12. div.header {   
13.     너비: 100%;   
14.     높이: 100px;   
15.     테두리 하단: 1px 점선 파란색;   
16. }   
17.   
18. div.title-outer {   
19.     직위: 친척;   
20.     상위: 50%;   
21.     높이: 30px;   
22. }   
23. span.title {   
24.     텍스트 정렬: 왼쪽;   
25.     직위: 친척;   
26.     왼쪽: 3%;   
27.     상위: -50%;   
28.     글꼴 크기: 22px;   
29. }   
30.   
31. div.body {   
32.     너비: 100%;   
33. }   
34. .overlay {   
35.     위치: 절대;   
36.     상단: 0px;   
37.     왼쪽: 0px;   
38.     z-색인: 10001;   
39.     디스플레이:없음;   
40.     filter:alpha(불투명도=60);   
41.     배경색: #777;   
42.     불투명도: 0.5;   
43.     -moz-불투명도: 0.5;   
44. }  
45. .loading-tip {   
46.     z-색인: 10002;   
47.     위치: 고정;   
48.     디스플레이:없음;   
49. }   
50. .loading-tip img {   
51.     너비:100px;   
52.     높이:100px;   
53. }   
54.   
55. .modal {   
56.     위치:절대;   
57.     너비: 600px;   
58.     높이: 360px;   
59.     테두리: 1px 단색 rgba(0, 0, 0, 0.2);   
60.     상자 그림자: 0px 3px 9px rgba (0, 0, 0, 0.5);   
61.     디스플레이: 없음;   
62.     z-색인: 10003;   
63.     테두리-반경: 6px;   
64. }   
65.   

index.js

JavaScript 코드复复内容到剪贴板

1. 함수 rightIFrameLoad(iframe) {
2.  var pHeight = getWindowInnerHeight() - $('#header').height() - 5 ;
3.  
4. $('div.body').height(pHeight)
5. console.log(pHeight)
6.  
7. }
9. // 브라우저 호환성 브라우저 뷰포트 높이 가져오기
10. 함수 getWindowInnerHeight() {
11. var winHeight = window.innerHeight
12. || (document.documentElement && document.documentElement.clientHeight)
13. || (document.body && document.body.clientHeight)
14. 반환 winHeight
15.  
16. }
18. // 브라우저 호환성 브라우저 뷰포트 너비 가져오기
19. 함수 getWindowInnerWidth() {
20. var winWidth = window.innerWidth
21. || (document.documentElement && document.documentElement.clientWidth)
22. || (document.body && document.body.clientWidth)
23. 반환 winWidth
24.  
25. }
27. /**
28. * 마스크 레이어 표시
29. */
30. 함수 showOverlay() {
31. //마스크 레이어의 너비와 높이는 각각 페이지 콘텐츠의 너비와 높이입니다.
32. $('.overlay').css({'높이':$(문서). 높이(),'너비':$(document).width()})
33. $('.overlay').show()
34. }
36. /**
37. * 로딩 프롬프트 표시
38. */
39. 함수 showLoading() {
40. //마스크 레이어를 먼저 표시
41. showOverlay()
42. // 로딩 프롬프트 창이 중앙에 위치
43. $("#loadingTip").css('top',
44. (getWindowInnerHeight() - $("#loadingTip").height()) / 2 'px')
45. $("#loadingTip").css('왼쪽',
46. (getWindowInnerWidth() - $("#loadingTip").width()) / 2 'px')
47.                                              
$(
48. "#loadingTip").show()
$(document).scroll(
49. 함수() {
50. 반환 거짓
})
}
54. /**
55. * 로딩 프롬프트 숨기기
56. */
57. 함수 hideLoading() {
$(
58. '.overlay').hide()
$(
59. "#loadingTip").hide()
$(document).scroll(
60. 함수() {
61. 반환 참
})
}
64. /**
65. * 팝업 모달 창 DIV 시뮬레이션
66. * @param innerHtml 모달 창 HTML 콘텐츠
67. */
68. 함수 showModal(innerHtml) {
69. // 시뮬레이션 모달 창을 표시하는 데 사용되는 DIV 가져오기
70. var 대화 상자 = $('#modalDiv');
 
72. // 내용 설정
dialog.html(innerHtml)
 
75. // 모달 창 DIV 창이 중앙에 있음
대화상자.css({
 
77. 'top' : (getWindowInnerHeight() -Dialog.height()) / 2 'px' ,
 
78. '왼쪽' : (getWindowInnerWidth() -Dialog.width()) / 2 'px'
})
 
81. // 창 DIV 둥근 모서리
Dialog.find(
82. '.modal-container').css('border-radius', '6px')
 
84. // 모달 창 닫기 버튼 이벤트
Dialog.find(
85. '.btn-close').click(함수(){
closeModal()
})
 
89. //마스크 레이어 표시
showOverlay()
 
92. //마스크 레이어 표시
dialog.show()
}
96. /**
97. * 모달 창 닫기 시뮬레이션 DIV
98. */
99. 함수 closeModal() {
$(
100. '.overlay').hide()
$(
101. '#modalDiv').hide()
$(
102. '#modalDiv').html(''); }

103. body.html

     XML/HTML 코드클립보드에 콘텐츠 복사

     1. html>  
     2. html lang="zh- CN">  
     3. 머리>  
     4. 메타 문자 집합="utf- 8">  
     5. 메타 http-equiv=" X-UA 호환" 콘텐츠="IE=edge">  
     6. 제목>본문页면제목>  
     7. 스타일 유형="text/ css">  
     8. * {   
     9.     여백: 0;   
     10.     패딩: 0;   
     11. }   
     12.   
     13. html, 본문 {   
     14.     너비: 100%;   
     15.     높이: 100%;   
     16. }   
     17.   
     18. .outer {   
     19.     너비: 200px;   
     20.     높이: 120px;   
     21.     위치: 상대적;   
     22.     상위: 50%;   
     23.     왼쪽: 50%;   
     24. }   
     25.   
     26. .inner {   
     27.     너비: 200px;   
     28.     높이: 120px;   
     29.     위치: 상대적;   
     30.     상위: -50%;   
     31.     왼쪽: -50%;   
     32. }   
     33.   
     34. .버튼 {   
     35.     너비: 200px;   
     36.     높이: 40px;   
     37.     위치: 상대적;   
     38. }   
     39.     
     40. .button#btnShowLoading {   
     41.     상위: 0;   
     42. }   
     43.   
     44. .button#btnShowModal {   
     45.     상위: 30%;   
     46. }
     48. 스타일>
     49. 스크립트 유형="text/ javascript">
     50.  
     51. 함수 showOverlay() {
     52. // 상위 창을 호출하여 마스크 레이어와 로드 프롬프트를 표시합니다.
     53. window.top.window.showLoading()
     55. // 타이머를 사용하여 로딩 프롬프트 닫기를 시뮬레이션합니다.
     56. setTimeout(function() {
     57. window.top.window.hideLoading()
     58. }, 3000)
     60. }
     62. 함수 showModal() {
     63. // 팝업 모달 창을 시뮬레이션하기 위해 상위 창 메서드 호출
     64. window.top.showModal($('#modalContent').html())
     65. }
     66.  
     67. 스크립트>
     68. 머리>
     69. 몸>
     70.  div class='외부' >
     71.  div class='내부' >
     72.  버튼 id='btnShowLoading' 클래스='버튼' 클릭='showOverlay();'>클릭하여 마스크 레이어 팝업버튼>
     73.  버튼 id='btnShowModal' 클래스='버튼' 클릭='showModal();'>클릭하여 모달 창 띄우기버튼>
     74. div>
     75.  div> 
     76.  
     78.  div id='modalContent' 스타일='디스플레이: 없음;'>
     79.  div class='modal- 컨테이너' 스타일='너비: 100%;높이: 100%;배경색: 흰색;'>
     80.  div 스타일='너비: 100%;높이: 49px;위치: 상대;왼쪽: 50%;상단: 50%;'>
     81.                스팬 스타일='글꼴- 크기: 36px; 너비: 100%; 텍스트 정렬:가운데; 디스플레이: 인라인 블록; 위치:상속; 왼쪽: -50%;위: -50%;'>模态窗口1폭 >  
     82.             div>  
     83.            버튼 수업='btn- 닫기' 스타일='너비: 100px; 높이: 30px; 위치: 절대; 오른쪽: 30px; 하단: 20px;'>关闭버튼>
     84.         div>  
     85.     div>  
     86.     스크립트 유형='text/ javascript' src="js/jquery-1.10.2.js"> 스크립트>  
     87. 몸>  
     88. html>  
     89.   

     运行结果：

     初始화

     

     显示遮罩层와Loading提示

     

     显示遮罩层和模拟弹伹模态窗口

     

     以上就是本文의 전체 부서는 内容, 希望对大家의 학교입니다.

     원문:http://www.cnblogs.com/haoqipeng/p/html-overlay.html