なぜ私のモーダルが開くと背景が暗くなりますか？

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に設定され、モーダルのheightを100%に設定されているため

モーダル暗いオーバーレイを示すことが理由です。したがって、モーダルの背景は効果的に画面全体の高さと幅であり、インラインCSSで設定された色を持ちます。モーダルをアクティブにするたびに（ボタンをクリックすると）、フルスクリーンの暗いオーバーレイが表示されます。

Answer 2

それは、それは

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

このdiv要素は、（display: noneを経由して）デフォルトでは非表示され、ユーザーは「をクリックしたときにはJavaScriptによって示される効果を作るもの、黒の色と不透明度を持つdiv要素ですOpen modal "ボタンをクリックします。