열린 모달을위한 배경 만들기 - CSS NO BOOTSTRAP

Question

이 문제에 대한 가장 간단한 해결책을 찾으려고합니다. 나는 열린 모달의 배경이 회색으로 보이도록하고 싶다. 나는이 문제에 대한 어떤 정직한 대답도 찾을 수 없다. 나는 이것을 달성하는 것에 가깝다. 지금 자바 스크립트는 모달이 열려있을 때 앱의 전체 본문에 클래스를 추가합니다. 이 클래스는 openModal입니다. 내 현재 시도는 해당 클래스에 opacity: 0.4;로 전화하는 것입니다. 이렇게하면 페이지에 불투명도가 추가됩니다. 그러나 그것은 또한 모달을 다룹니다. 나는 그것을 원하지 않는다. 모달로 불투명도를 덮어 쓰게하려면 어떻게해야합니까?

여기 내 CSS입니다.

.openModal { 
    opacity: 0.3; 

    .proceeds-modal { 
    padding: 20px; 
    position: absolute; 
    top: 200px; 
    width: 95%; 
    right: 2%; 
    height: auto; 
    background-color: $base-background-color; 
    border: 1px solid #ddd; 
    box-shadow: 0.2px 0.6px 0.5px 0.5px; 
    } 
} 

Answer 1

당신의 HTML을 보지 않고, 나는 .openModal { background: rgba(0,0,0,0.5); }

처럼 .openModal에 rgba() 배경을 설정하는 것이 좋습니다 것입니다 또는 당신은 항상 대신 .openModal의 의사 요소를 사용하고 rgba()를 사용하거나 이미 시도처럼 opacity를 사용할 수 있습니다 .

.proceeds-modal { 
 
    padding: 20px; 
 
    position: absolute; 
 
    top: 200px; 
 
    width: 95%; 
 
    right: 2%; 
 
    height: auto; 
 
    background-color: white; 
 
    border: 1px solid #ddd; 
 
    box-shadow: 0.2px 0.6px 0.5px 0.5px; 
 
    z-index: 1; 
 
} 
 

 
.openModal:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    content: ''; 
 
}

<div class="openModal"> 
 
    <div class="proceeds-modal"> 
 
    modal 
 
    </div> 
 
</div>