CSSモーダルウィンドウ複数のdiv内の問題

Question

ウェブページ上のアプリケーション全体に広がるモーダルウィンドウを作成しようとしています。

アプリケーションは、深いレベルのdivsで構成されています。 例：パネル>パネル>パネル - 詳細>カード>カードの内容

カードごとにモーダルコンポーネントを作成したいが、それらのすべてがアプリケーション全体にまたがっている必要があります。以下は

要件

実際

私の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); 
} 

/* Modal Content */ 
.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
} 

私のHTMLの構造は次のとおりです。

<div class="modal"> 
    <div class="modal-content"> 
    <p>Card 1 Modal</p> 
    </div> 
</div> 

入れ子divでラップされたclass = "modal"の要素を考えてみましょう。

カード1のモーダルがアプリケーション全体にまたがっているように見えるようにするにはどうすればよいですか？

モダールコンポーネントをネストされたdivの外に置くのは良い考えですか？

Answer 1

モーダルとして表示する場合は、position: absoluteを使用する必要があることを意味し、他のすべてのdivに影を付ける効果は、一般的なrgbカラーと不透明度であるRGBA関数を使用して行いました。

この例を見てみましょう：

.container{ 
 
    display: flex; 
 
    position: relative; 
 
    justify-content: center; 
 
    flex-direction: row; 
 
    height: 300px; 
 
    width: 100%; 
 
} 
 

 
.content1{ 
 
    display: flex; 
 
    background-color: blue; 
 
    flex: 1; 
 
    height: 100%; 
 
} 
 

 
.content2{ 
 
    display: flex; 
 
    background-color: red; 
 
    flex: 1; 
 
    height: 100%; 
 
} 
 

 
.content3{ 
 
    display: flex; 
 
    background-color: green; 
 
    flex: 1; 
 
    height: 100%; 
 
} 
 

 
.modal { 
 
\t display: flex; 
 
\t position: absolute; 
 
\t justify-content: center; 
 
\t left: 0; 
 
\t top: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow: auto; 
 
\t background-color: rgba(0,0,0, 0.5); 
 
} 
 

 
/* Modal Content */ 
 
.modal-content { 
 
\t align-self: center; 
 
\t background-color: red; 
 
\t margin: 50px; 
 
\t border: 1px solid #888; 
 
\t width: 80%; 
 
\t height: 100px; 
 
} 
 

 
#other { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
    margin: 50px; 
 
}

<div> 
 
<div class="container"> 
 
    <div class="content1"> 
 
    </div> 
 
    <div class="content2"> 
 
    </div> 
 
    <div class="content3"> 
 
    </div> 
 
    <div class="modal"> 
 
\t <div class="modal-content"> 
 
\t <p>Card 1 Modal</p> 
 
\t </div> 
 
    </div> 
 
</div> 
 
<div id="other"> 
 
    something else 
 
</div> 
 
</div>

Answer 2

を彼らのpositionがfixedであれば、ネストされたdiv要素の外モーダルdivを取る必要はありません。

#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
} 
 

 
.card { 
 
    margin-top: 30px; 
 
    background-color: rebeccapurple; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    width: 30%; 
 
} 
 

 
.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); */ 
 
} 
 

 
.modal-open { 
 
    display: block; 
 
} 
 

 
/* Modal Content */ 
 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
}

<div id="container"> 
 
    <div class="card"> 
 
    <div class="modal"> 
 
     <div class="modal-content"> 
 
     <p>Card 1 Modal</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="modal"> 
 
     <div class="modal-content"> 
 
     <p>Card 2 Modal</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="modal modal-open"> 
 
     <div class="modal-content"> 
 
     <p>Card 3 Modal</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

このスタイルを試してください。私は問題を解決します。

https://jsfiddle.net/12q1y6y7/1/

.modal { 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0, 0.5); 
    position:inherit; 
} 

/* Modal Content */ 
.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
} 

.third { 
    width: 30%; 
    height: 200px; 
    float: left; 
    border: 1px solid red; 
    postition: relative; 
}