아이디어 :
• 마스크 생성, 마스크의 스태킹 순서를 설정하여 다른 요소를 덮을 수 있는지 확인하십시오.
위치 : 절대; 상단 : 0; 왼쪽 : 0; 디스플레이 : 없음; 배경색 : RGBA (9, 9, 9, 0.63); 너비 : 100%; 높이 : 100%; z- 안수 : 1000; • 마스크 너비에서 컨텐츠의 배경색 및 디스플레이 형식을 설정하십시오. • 바인딩 이벤트, 마스크의 디스플레이 속성 함수 showmodel ( 'myModel'). Style.display = 'block';} function closeModel () {document.getElementByid ( 'myModel'). style.display = 'none';}의 디스플레이 속성 함수 showmodel ()을 동적으로 전환참고 : 마스크는 절대적으로 배치되어야하며 너비와 높이는 전체 페이지를 차지해야하며 스태킹 순서가 커야합니다.
소스 코드
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> 마스크 </title> <style> .container {width : 900px; margin : 50px Auto; 텍스트-알리어 : 센터;}#mymodel {순대; 0; RGBA (9, 9, 9, 0.63); 너비 : 100%; 높이 : 100%; z-index : 1000;}. 모델-컨텐츠 {width : 50%; 텍스트-알림 : 중심; 배경 : #ffffff; border-radius : 6px; 마진 : 100px auto; line-height : 30px; z-index : 10001; onclick = "showmodel ()"> 팝업 마스크 </button </button> <div id = "myModel"onclick = "closeModel ()"> <div> <p> 안녕하세요, 컨텐츠 ~~ </p> <p> <버튼 id = "CloseModel"Onclick = "closeModel ()"> close> </div> </div> </div> </div> {document.getElementById ( 'myModel'). style.display = 'block';} function closeModel () {document.getElementById ( 'myModel'). style.display = 'none';} </script> </body> </html>위는 편집기가 소개 한 JavaScript Mask (Model) 기능의 간단한 구현 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!