Fullscreen absolute child positioning-CodePudding

I've been at this for a while, but I can't seem to figure out a proper way of doing this. Within my application I have a modal view inwhich there is a component that needs to take up the fullscreen. The problem I'm having is that the element is placed relative to their parent. While I need the positioning relative to the html body. Is there any way I can do this? I've made a simple fiddle showing the problem more clearly.

HTML

<div >
  <div >
    test
  </div>
</div>

.modal {
  height: 100px;
  width: 100px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fullscreen {
  background: rgba(231, 29, 91, 0.5);
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

Fiddle

The only solution I've so far been able to find myself is the following;

.fullscreen {
  background: rgba(231, 29, 91, 0.5);
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: calc(-50vh   50%);
  left: calc(-50vw   50%);
}

But this isn't very pretty.

CodePudding user response：

Please feel free to use the version of the modal provided here:

JS Fiddle Link for Working Modal

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" >

  <!-- Modal content -->
  <div >
    <span >&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

I got that code from w3schools. It uses javascript in addition to CSS and HTML. All you would need to do is hit the button that's located in the top left corner of the results screen to show the modal.

But if you really want to speed things up, you can look into using the bootstrap UI framework to build your frontend. Good luck.

Good luck.

CodePudding user response：

You can fix this issue by changing code to following.

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.modal {
  width: 100px;
  height: 100px;
  background-color: red;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: yellow;
}

<div >
  <div >
    <div >
      Test
    </div>
  </div>
</div>

Have a read on to this mdn article it explains why your earlier solution didn't work. https://developer.mozilla.org/en-US/docs/Web/CSS/position