时间戳

首页 > 解决方案 > 修复了溢出视口时模态不会滚动的问题

html - 修复了溢出视口时模态不会滚动的问题

问题描述

问题

我制作了一个固定模式来显示页面的主要内容。模态框的内容的高度可能最终大于视口，因此需要滚动，但它只是不起作用。

模态内容

在模态中是

  1. 一个带有灰色背景 的空覆盖/背景，它占据了模态框的整个宽度和高度。div
  2. 内容本身的高度可能最终会大于视口。

JS小提琴

这是一个演示问题的 JS Fiddle。我添加了边框颜色以更好地帮助区分各个元素。

https://jsfiddle.net/mLjs49ms/7/

标签： htmlcssscrollmodal-dialogcss-position

解决方案

您需要将此 css 属性添加到modal__content：

  position:relative;
  overflow:auto;
  height:100%;
  • z-index 没有被应用，因为位置是静态的，所以你需要添加position:relative
  • 并激活滚动，您需要同时添加和overflow:auto固定height100%
  • 不要忘记，您也应该修复height模态父 模态100%的

查看结果：

html,
body {
  width: 100%;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: consolas;
}

.main {
  border: 2px solid blue;
}

.modal {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

.modal__overlay {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(138, 138, 138, 0.5);
  border: 2px dashed green;
}

.modal__content {
  z-index: 2;
  border: 2px dotted blue;
  position: relative;
  overflow: auto;
  height: 100%;
}

.simulate-content {
  width: 120px;
  height: 200px;
  margin: 12px auto;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(255, 50, 50);
}
<body>
  <!-- PLACEHOLDER CONTENT -->
  <div class='main'>
    <h3> BODY CONTENT </h3>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

  <!-- THE MODAL -->
  <div class='modal'>
    <div class='modal__overlay'></div>
    <div class='modal__content'>
      <p class='simulate-content'>MODAL CONTENT 1 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 2 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 3 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 4 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 5 of 5</p>
    </div>
  </div>
</body>

推荐阅读