왜 내 모달이 열리면 배경이 어두워 집니까?

Question

모달 코드 here의 예가 있습니다.

모달이 열려있을 때 코드의 어느 부분이 배경을 어둡게하는지 알 수 없습니다. 힌트를 주시기 바랍니다. 감사합니다.

Answer 1

.modal CSS를 살펴 보겠습니다.

.modal { 
display: none; 
position: fixed; 
z-index: 1; 
padding-top: 100px; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.4); /* <-- this is the culprit */ 
} 

background-color: rgba(0,0,0,0.4);은 배경이 회색으로 표시되는 이유입니다. 이 기능을 비활성화하거나 밝게 표시 한 rgba로 재정의하면 어두운 효과가 제거됩니다 (예 : 회색 효과를 제거하고 완전 투명 검정색으로 재설정하려면 background-color: rgba(0,0,0,0)으로 설정).

rgba(0,0,0,0.4)은 검은 색 (rgb(0,0,0))이지만 40 %의 불투명도 (끝에 0,4)를 의미합니다. background-color는 어두운 컬러와 width 설정되고 모달의 height100%가 설정되어 있기 때문에

모달 어두운 오버레이를 표시하는 이유이다. 따라서 모달의 배경은 효과적으로 화면 전체의 높이와 너비이며 인라인 CSS에 설정된 색상을가집니다. 따라서 버튼을 클릭하여 모달을 활성화 할 때마다 전체 화면 어두운 오버레이를 표시합니다.

그것은, 즉,이 사업부는 ( display: none 통해) 기본적으로 숨겨져 있습니다

<div id="myModal" class="modal"> 

효과를 만드는 것 블랙 색상과 불투명도 사업부

Answer 2

입니다 , 사용자 "가를 클릭하면 자바 스크립트로 표시됩니다 열기 모달 "버튼을 클릭하십시오.