성명
이 기사를 읽으면 특정 기본 HTML, CSS 및 JavaScript가 필요합니다.
설계
팝업 레이어 효과를 달성한다는 아이디어는 매우 간단합니다. 먼저 표시 할 컨텐츠를 숨기고 특정 조건 (예 : 버튼 클릭)을 트리거 한 후 원래 숨겨진 컨텐츠를 표시하십시오.
성취하다
<! docType html> <html> <head> <head> <title> Window Object </title> <meta charset = "utf-8"> </head> <a href = "http://www.baidu.com"> baidu </a> <button type = "id ="id = "divy style : none : none :; Lightblue; 테두리 : 1px 솔리드 그린; " id = "토스트"> <!-컨텐츠를 숨기기 위해 디스플레이 속성을 없음-> <p> 이것은 팝업 레이어 컨텐츠 </p> <버튼 유형 = "버튼"id = "close"> 팝업 레이어를 닫습니다 </button> </div> <script type = "text/javaScript"> var toast = document.getElementById ( "토스트"); document.getElementById ( "Open"). OnClick = function (e) {<!-숨겨진 내용을 표시 할 클릭 이벤트를 정의합니다.> Toast.style.display = "block"; Toast.style.position = "고정"; var winwidth = Window.innerWidth; var winheight = window.innerheight; var targetWidth = 토스트 .OffSetWidth; var targetheight = 토스트 .offsetheight; Toast.style.top = (winheight -targetheight) / 2 + "px"; Toast.style.left = (winwidth -targetwidth) / 2 + "px"; } document.getElementById ( "close"). onclick = function (e) {<!-표시된 내용을 다시 숨 깁니다-> toast.style.display = "none"; } </script> </body> </html>디스플레이 효과는 다음과 같습니다.
그러나 숨겨진 콘텐츠가 나타나면 링크를 통해 여전히 바이두 페이지를 입력 할 수 있습니다. 이런 일이 발생하지 않도록하기 위해 모든 원래 페이지 컨텐츠를 다루는 마스크 레이어를 제공 할 수 있습니다. 코드는 다음과 같습니다.
<! docType html> <html> <head> <Head> <title> 창 객체 </title> <meta charset = "utf-8"> </head> <a href = "http://www.baidu.com"> baidu </a> <button type = "id ="stity open "> 팝업 레이어> 없음; 위치 : 고정; 너비 : 100%; 높이 : 100%; 상단 : 0px; 왼쪽 : 0px; 배경 : 회색; "> <!-마스크 레이어를 통해 배경을 마스크하십시오-> <div style ="background : lightblue; 경계 : 1px Solid Green; " id = "토스트"> <!-컨텐츠를 숨기기 위해 디스플레이 속성을 설정하십시오-> <p> 여기 팝업 레이어 컨텐츠 </p> <버튼 유형 = "id ="close "> 팝업 레이어를 닫습니다 </div> </div> <script type ="text/javascript "> var toast = document. var cover = document.getElementById ( "cover"); document.getElementById ( "Open"). OnClick = function (e) {<!-숨겨진 내용을 표시 할 클릭 이벤트를 정의합니다.> cover.style.display = "block"; Toast.style.position = "고정"; var winwidth = Window.innerWidth; var winheight = window.innerheight; var targetWidth = 토스트 .OffSetWidth; var targetheight = 토스트 .offsetheight; Toast.style.top = (winheight -targetheight) / 2 + "px"; Toast.style.left = (winwidth -targetwidth) / 2 + "px"; } document.getElementById ( "close"). onclick = function (e) {<!-표시된 내용을 다시 숨 깁니다-> cover.style.display = "none"; } </script> </body> </html>아래 그림과 같이 다시 테스트 결과입니다.
요약
위의 내용은 단순히 팝업 레이어 효과를 구현하지만 더 많은 코드를 추가하면이를 기반으로 더 복잡한 기능을 구현할 수 있습니다.
팝업 레이어 효과를 달성하기 위해 JavaScript를 사용하는 위의 간단한 예는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.