CSS Modal Window Issue inside multiple divs

Question

I am trying to create a Modal Window which is spaning accross the entire application on the web page.

Application consists of deep level divs nested one after the other. For eg: panels > panel > panel-detail > card > card-content

I wish to create a Modal Component for each card but all of them should be spanning accross the application.

Requirement

Actual

Below is my 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%;
}

My HTML Structure for modal is:

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

Consider the element with class="modal" wrapped in the nested divs.

How shall I write my CSS so as the modal in Card 1 appears to be spanning accross the entire application?

Would it be a good idea to put the modal component outside the nested divs?

Answer 1

When you want to display something as modal, it means it need to use position: absolute, and the effect of putting a shadow over all other divs I made it using RGBA function, which is a common rgb color plus opacity.

Take a look at this example:

.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 {
	display: flex;
	position: absolute;
	justify-content: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0, 0.5);
}

/* Modal Content */
.modal-content {
	align-self: center;
	background-color: red;
	margin: 50px;
	border: 1px solid #888;
	width: 80%;
	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">
	<div class="modal-content">
	  <p>Card 1 Modal</p>
	</div>
  </div>
</div>
<div id="other">
  something else
</div>
</div>

Answer 2

Try this style. I will be fixed the problem.

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;
}

Answer 3

It shouldn't be necessary to take the modal divs outside of the nested divs if their position is fixed:

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