オープンモーダルの背景を作成する - CSS NO BOOTSTRAP

Question

私はこの問題に対する最も簡単な解決法を見つけようとしています。私は開いたモーダルの背景に灰色の外観を持たせたいだけです。私はこの問題に対する直接的な答えを見つけることができないようです。私はこれを達成することに近いです。今、私のjavascriptは、モーダルが開いているときにクラスをアプリケーションの本体全体に追加します。クラスは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>