CODEWITHSUNDEEP
cssmodal-dialogwidth
Aske Olesen
Aske Olesen

Reputation: 17

How do I make my modal cover the entire screen?

I'm building a leaderboard web app and I'm trying to add a modal or "popup" but I can't seem to get it right.

Here's an image of what it looks like now: As is shown, the modal does not take up the full width of the screen, resulting in the right part of the screen not being covered and the modal itself not being centered. Screenshot of the problem

My code looks like this:

HTML:

<p>{{ num_matches_in_current_season }} matches have been played in season {{ current_season }} so far.</p>
<button type="button" name="end_season_btn" id="end-season_button" class="btn btn-secondary">End Season {{ current_season }}</button>

<div class="container confirm-window" id="myConfirmWindow">
  <div class="confirm-content">
    <p>End Season {{ current_season }} after {{ num_matches_in_current_season }} matches?</p>

    <form method="POST">
      {% csrf_token %}
      <input type="submit" name="end_season" class="btn btn-secondary" value="Yes. End Season {{ current_season }}">
    </form>
  </div>

</div>
</div>

CSS:

.confirm-window {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%x;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

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

Javascript:

var modal = document.getElementById("myConfirmWindow");

var btn = document.getElementById("end-season_button");

btn.onclick = function() {
  modal.style.display = "block";
}

Hope some of you can help me identify the problem. Thanks in advance.

Upvotes: 0

Views: 5890

Answers (1)

amarinediary
amarinediary

Reputation: 5441

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
Source @ https://www.w3schools.com/css/css_positioning.asp

With that in mind you should add the following to your .confirm-window class

.confirm-window {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

More @ https://www.w3schools.com/css/css_positioning.asp regarding the position property

Upvotes: 2

Related Questions