HTML에서 마스크 레이어를 구현하는 방법 HTML_HTML/Xhtml_웹페이지 제작에서 마스크 레이어를 사용하는 방법-HTML 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 16:45:59

원래의

1730명이 탐색했습니다.

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

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

샘플 코드:

index.html

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

>
<html lang="zh- CN">
<머리>
<메타 문자 집합="utf- 8">
<메타 http-equiv=" X-UA 호환" 콘텐츠="IE=edge">
<제목>HTML遮罩层제목>
<링크 rel="스타일시트" href="css/index.css">
머리>
<몸>
<div class="header" id="헤더">
<div class="title- 외부">
<스팬 클래스="제목" >
HTML遮罩层使용
스팬>
div>
div>
<div class="body" id="본문">
<iframe id="iframeRight" 이름="iframeRight" 너비="100%" 높이="100%"
스크롤="아니요" 프레임 테두리="0"
스타일="테두리: 0px;여백: 0px; 패딩: 0px; 너비: 100%; 높이: 100%;오버플로 : 숨김;"
온로드="rightIFrameLoad(this)" src="body.html">iframe>
div>
<div id="오버레이" 클래스="오버레이">div>
<div class="modal" id="modalDiv">div>
<스크립트 유형='text/ javascript' src="js/jquery-1.10.2.js"> 스크립트>
<스크립트 유형="text/ javascript" src="js/index.js">< ;/스크립트>
몸>
html>

index.css

CSS 코드复复内容到剪贴板

* {
여백: 0;
패딩: 0;
}
html, 본문 {
너비: 100%;
높이: 100%;
글꼴 크기: 14px;
}
div.header {
너비: 100%;
높이: 100px;
테두리 하단: 1px 점선 파란색;
}
div.title-outer {
직위: 친척;
상위: 50%;
높이: 30px;
}
span.title {
텍스트 정렬: 왼쪽;
직위: 친척;
왼쪽: 3%;
상위: -50%;
글꼴 크기: 22px;
}
div.body {
너비: 100%;
}
.overlay {
위치: 절대;
상단: 0px;
왼쪽: 0px;
z-색인: 10001;
디스플레이:없음;
filter:alpha(불투명도=60);
배경색: #777;
불투명도: 0.5;
-moz-불투명도: 0.5;
}
.loading-tip {
z-색인: 10002;
위치: 고정;
디스플레이:없음;
}
.loading-tip img {
너비:100px;
높이:100px;
}
.modal {
위치:절대;
너비: 600px;
높이: 360px;
테두리: 1px 단색 rgba(0, 0, 0, 0.2);
상자 그림자: 0px 3px 9px rgba (0, 0, 0, 0.5);
디스플레이: 없음;
z-색인: 10003;
테두리-반경: 6px;
}

index.js

JavaScript 코드复复内容到剪贴板

함수 rightIFrameLoad(iframe) {
var pHeight = getWindowInnerHeight() - $('#header').height() - 5 ;
$('div.body').height(pHeight)
console.log(pHeight)
}
// 브라우저 호환성 브라우저 뷰포트 높이 가져오기
함수 getWindowInnerHeight() {
var winHeight = window.innerHeight
|| (document.documentElement && document.documentElement.clientHeight)
|| (document.body && document.body.clientHeight)
반환 winHeight
}
// 브라우저 호환성 브라우저 뷰포트 너비 가져오기
함수 getWindowInnerWidth() {
var winWidth = window.innerWidth
|| (document.documentElement && document.documentElement.clientWidth)
|| (document.body && document.body.clientWidth)
반환 winWidth
}
/**
* 마스크 레이어 표시
*/
함수 showOverlay() {
//마스크 레이어의 너비와 높이는 각각 페이지 콘텐츠의 너비와 높이입니다.
$('.overlay').css({'높이':$(문서). 높이(),'너비':$(document).width()})
$('.overlay').show()
}
/**
* 로딩 프롬프트 표시
*/
함수 showLoading() {
//마스크 레이어를 먼저 표시
showOverlay()
// 로딩 프롬프트 창이 중앙에 위치
$("#loadingTip").css('top',
(getWindowInnerHeight() - $("#loadingTip").height()) / 2 'px')
$("#loadingTip").css('왼쪽',
(getWindowInnerWidth() - $("#loadingTip").width()) / 2 'px')
"#loadingTip").show()
함수() {
반환 거짓
/**
* 로딩 프롬프트 숨기기
*/
함수 hideLoading() {
'.overlay').hide()
"#loadingTip").hide()
함수() {
반환 참
/**
* 팝업 모달 창 DIV 시뮬레이션
* @param innerHtml 모달 창 HTML 콘텐츠
*/
함수 showModal(innerHtml) {
// 시뮬레이션 모달 창을 표시하는 데 사용되는 DIV 가져오기
var 대화 상자 = $('#modalDiv');
// 내용 설정
// 모달 창 DIV 창이 중앙에 있음
'top' : (getWindowInnerHeight() -Dialog.height()) / 2 'px' ,
'왼쪽' : (getWindowInnerWidth() -Dialog.width()) / 2 'px'
// 창 DIV 둥근 모서리
'.modal-container').css('border-radius', '6px')
// 모달 창 닫기 버튼 이벤트
'.btn-close').click(함수(){
//마스크 레이어 표시
//마스크 레이어 표시
/**
* 모달 창 닫기 시뮬레이션 DIV
*/
함수 closeModal() {
'.overlay').hide()
'#modalDiv').hide()
'#modalDiv').html(''); }
body.html
XML/HTML 코드클립보드에 콘텐츠 복사
1. >
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. }
13. html, 본문 {
14. 너비: 100%;
15. 높이: 100%;
16. }
18. .outer {
19. 너비: 200px;
20. 높이: 120px;
21. 위치: 상대적;
22. 상위: 50%;
23. 왼쪽: 50%;
24. }
26. .inner {
27. 너비: 200px;
28. 높이: 120px;
29. 위치: 상대적;
30. 상위: -50%;
31. 왼쪽: -50%;
32. }
34. .버튼 {
35. 너비: 200px;
36. 높이: 40px;
37. 위치: 상대적;
38. }
40. .button#btnShowLoading {
41. 상위: 0;
42. }
44. .button#btnShowModal {
45. 상위: 30%;
46. }
48. 스타일>
49. <스크립트 유형="text/ javascript">
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. }
67. 스크립트>
68. 머리>
69. <몸>
70. <div class='외부' >
71. <div class='내부' >
72. <버튼 id='btnShowLoading' 클래스='버튼' 클릭='showOverlay();'>클릭하여 마스크 레이어 팝업버튼>
73. <버튼 id='btnShowModal' 클래스='버튼' 클릭='showModal();'>클릭하여 모달 창 띄우기버튼>
74. div>
75. div>
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>
运行结果：

初始화

显示遮罩层와Loading提示

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

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

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