javascript - 如何使用 CSS 溢出模态窗口的一部分

标签 javascript jquery html css overflow

我创建了一个包含 2 个部分的模态窗口:headerul。我使用 jQuery 打开模式。到目前为止,一切都很好。我想让 ul 适合模态框而不会溢出。

我可以溢出 .modal。但是,我真的只是想溢出 ul,而不是整个 .modal 框。

https://jsfiddle.net/tjL1e0ca/

$(document).on("click", "h3", function(e) {
  $(".modal").css("display", "block");
})
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  max-width: 650px;
  max-height: calc(100% - 60px);
  padding: 30px 20px 20px;
  /*overflow: auto;*/
  border: 3px solid black;
  background-color: #ccc;
}

.modal_1 ul {
  background-color: red;
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>click here to open modal</h3>

<div class="modal">
  <div class="modal_1">
    <div>
      <h1>HEADER GOES HERE</h1>
      <h2>SUB GOES HERE</h2>
    </div>
    <ul>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
    </ul>
  </div>
</div>

最佳答案

style="overflow-y: auto; height: 100px;" 添加到您的 ul。这基本上将 overflow-y 添加到您的 ul,除非它仅在您指定高度时才有效。

我更新了你的 JSFiddle为你。

根据需要更改高度。

更新: 看了评论后,我明白了你想让ul的高度自适应而不是设置。要解决此问题,请将高度从 height: 100px; 更改为 height: 50%;(并根据需要更改百分比)。这样,无论模态的高度如何,ul 将始终为模态的 50%。因为它似乎对这里的片段不起作用,所以我做了一个 JSFiddle为你。

$(document).on("click", "h3", function(e) {
  $(".modal").css("display", "block");
})
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

h3 {
  cursor: pointer;
}

.list {
  overflow-y: auto;
  height: 100px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 700;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  max-width: 650px;
  max-height: calc(100% - 60px);
  padding: 30px 20px 20px;
  /*overflow: auto;*/
  border: 3px solid black;
  background-color: #ccc;
}

.modal_1 ul {
  background-color: red;
  margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>click here to open modal</h3>

<div class="modal">
  <div class="modal_1">
    <div>
      <h1>HEADER GOES HERE</h1>
      <h2>SUB GOES HERE</h2>
    </div>
    <ul class="list">
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
    </ul>
  </div>
</div>

关于javascript - 如何使用 CSS 溢出模态窗口的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54961440/

相关文章:

javascript - 使 div 内的图像占用始终相同的空间

html - 当在 <a> 标签内时,可滚动的 <div> 变得可拖动

html - 将文本中心置于其上方的边框空间

javascript - 无法使用 Javascript 单击选项元素(无论是使用 Selenium 还是使用 Protractor)

javascript - 将 flash 添加到 html 页面以与 Jquery 一起使用的最简单方法是什么?

javascript - 使用 JS 或 JQuery 的多个条件/禁用选择选项?

javascript - 在数据列表控件中调用 jquery 函数

javascript - ThreeJS 中的弯曲文本对象

javascript - 隐藏/显示在 Internet Explorer 中不起作用

javascript - 如何检查jquery调用的所有图像的宽度和高度?