Hintergrund für offenes modal erstellen - CSS NO BOOTSTRAP

Question

Ich versuche, die einfachste Lösung für dieses Problem zu finden. Ich möchte nur den Hintergrund meines offenen Modals haben, um es grau aussehen zu lassen. Ich kann keine einfache Antwort auf dieses Problem finden. Ich bin jedoch nahe daran, dies zu erreichen. Gerade jetzt fügt mein Javascript eine Klasse dem gesamten Körper der App hinzu, wenn das Modal geöffnet ist. Die Klasse heißt openModal. Mein aktueller Versuch ist es, opacity: 0.4; für diese Klasse aufzurufen. Dies fügt der Seite eine Deckkraft hinzu. aber es deckt auch das Modal ab. was ich nicht passieren will. Wie kann ich die Opazität modal überschreiben lassen?

Hier ist mein 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

Ohne Ihre HTML zu sehen, würde ich empfehlen, auf .openModal einen rgba() Hintergrund Einstellung, wie .openModal { background: rgba(0,0,0,0.5); }

Oder Sie immer ein Pseudoelement .openModal stattdessen verwenden könnte, und rgba() oder opacity wie Sie bereits versucht verwenden verwenden .

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