Css 如何使模态覆盖整个屏幕？

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

下面是它现在的样子： 如图所示，模式没有占据屏幕的整个宽度，导致屏幕的右侧部分没有被覆盖，模式本身也没有居中

我的代码如下所示：

HTML:

Javascript:

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

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

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

---

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

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

具有位置的元素：固定；相对于视口定位，这意味着即使滚动页面，它也始终保持在同一位置顶部、右侧、底部和左侧属性用于定位元素。
来源@

考虑到这一点，您应该在

类中添加以下内容

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

关于职位属性的更多@
感谢您的回答。您提出的解决方案将模式集中在屏幕上，但是我现在在页面的右侧和左侧都有一个边缘，该边缘不在模式范围内。在复制您的问题时，我没有这个问题。如果你是css新手，你可能会忘记重置默认的浏览器样式行为。在
style.css文件
*{margin:0；padding:0；框大小：border-box；}
的trop处使用以下重置操作这里有一个指向当前代码笔的链接，我正在使用它来重现您的问题。。。谢谢我一有时间就会调查。如果这能回答你的问题，请不要忘记投票，接受我发现问题的答案。建议的解决方案，在我意识到我已经把它放进一个限制div宽度的引导容器中之后，我就这样做了。删除“container”类并添加right:0；底部：0；为了解决这个问题。谢谢@amarinediary
var modal = document.getElementById("myConfirmWindow");

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

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

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