时间戳

首页 > 解决方案 > 如何让我的模态覆盖整个屏幕？

css - 如何让我的模态覆盖整个屏幕？

问题描述

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

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

我的代码如下所示：

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

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

标签： cssmodal-dialogwidth

解决方案

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

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

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

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

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

推荐阅读