如何让我的模式覆盖整个屏幕？

Question

我正在构建一个排行榜网络应用程序，我正在尝试添加一个模式或“弹出窗口”，但我似乎无法正确处理。

这是它现在的样子：如图所示，模态框没有占据屏幕的整个宽度，导致屏幕的右侧部分没有被覆盖，模态框本身也没有居中。 Screenshot of the problem

我的代码如下所示：

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

希望你们中的一些人能帮我找出问题所在。提前致谢。

Answer 1

位置属性指定用于元素的定位方法类型（静态、相对、固定、绝对或粘性）。

一个位置为固定的元素；相对于视口定位，这意味着即使页面滚动，它也始终停留在同一个位置。 top、right、bottom 和 left 属性用于定位元素。
来源@https://www.w3schools.com/css/css_positioning.asp

考虑到这一点，您应该将以下内容添加到您的 .confirm-window class

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

更多@https://www.w3schools.com/css/css_positioning.asp关于职位属性

如何让我的模式覆盖整个屏幕？

How do I make my modal cover the entire screen?

css

modal-dialog

width