찾다

집  >  기사  >  웹 프론트엔드  >  HTML에서 마스크 레이어를 구현하는 방법 HTML_HTML/Xhtml_웹페이지 제작에서 마스크 레이어를 사용하는 방법

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

WBOY
WBOY원래의
2016-05-16 16:45:591679검색

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

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

샘플 코드:

index.html

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  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. $(
  48. "#loadingTip").show()
    49. $(document).scroll(
  49. 함수() {
  50. 반환 거짓
    51. })
    52. }
  54. /**
  55. * 로딩 프롬프트 숨기기
  56. */
  57. 함수 hideLoading() {
    58. $(
  58. '.overlay').hide()
    59. $(
  59. "#loadingTip").hide()
    60. $(document).scroll(
  60. 함수() {
  61. 반환 참
    62. })
    63. }
  64. /**
  65. * 팝업 모달 창 DIV 시뮬레이션
  66. * @param innerHtml 모달 창 HTML 콘텐츠
  67. */
  68. 함수 showModal(innerHtml) {
  69. // 시뮬레이션 모달 창을 표시하는 데 사용되는 DIV 가져오기
  70. var 대화 상자 = $('#modalDiv');
    71.  
  72. // 내용 설정
    73. dialog.html(innerHtml)
    74.  
  75. // 모달 창 DIV 창이 중앙에 있음
    76. 대화상자.css({
    77.  
  77. 'top' : (getWindowInnerHeight() -Dialog.height()) / 2 'px' ,
    78.  
  78. '왼쪽' : (getWindowInnerWidth() -Dialog.width()) / 2 'px'
    79. })
    80.  
  81. // 창 DIV 둥근 모서리
    82. Dialog.find(
  82. '.modal-container').css('border-radius', '6px')
    83.  
  84. // 모달 창 닫기 버튼 이벤트
    85. Dialog.find(
  85. '.btn-close').click(함수(){
    86. closeModal()
    87. })
    88.  
  89. //마스크 레이어 표시
    90. showOverlay()
    91.  
  92. //마스크 레이어 표시
    93. dialog.show()
    94. }
  96. /**
  97. * 모달 창 닫기 시뮬레이션 DIV
  98. */
  99. 함수 closeModal() {
    100. $(
  100. '.overlay').hide()
    101. $(
  101. '#modalDiv').hide()
    102. $(
  102. '#modalDiv').html(''); }

  103. 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. }   
    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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：W3C 권장 모바일 웹 마크업 언어 XHTML Basic 1.1_HTML/Xhtml_웹페이지 제작다음 기사：W3C 권장 모바일 웹 마크업 언어 XHTML Basic 1.1_HTML/Xhtml_웹페이지 제작

관련 기사

더보기