模态上的响应高度答案

【问题标题】：Responsive height on modal模态上的响应高度
【发布时间】：2016-02-28 19:41:30
【问题描述】：

我制作了一个 JQuery 模式，它显示了一个可以动态添加行的表格。

但是，当我添加行时，模式对于浏览器窗口来说变得太大了。如何使模态高度响应，以便即使在添加行后模态仍保留在浏览器窗口内？

这是DEMO。

这是我目前拥有的 css（您将在演示中看到）：

.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

.confirmationContent {
   background-color: #fefefe;
   margin: auto;
   z-index: 9999;
   width: 80%;
}

我通常喜欢使用 bootstrap 或 Foundation 来处理响应式设计，但在我工作的地方不允许使用这些框架。

感谢您的帮助。

【问题讨论】：

所以无论添加多少行，您都希望模态框的内容始终在视口的高度内可见？
我认为这是不可能的，因为在某些时候你会耗尽垂直空间。您要么必须使用overflow: auto 来显示滚动条，要么随着表格变大而减小行高

标签： jquery css responsive-design

【解决方案1】：

Updated Code Here

我将表格保存在一个带有“mytbl”类的 div 中

mytbl 的 css

.mytbl{
  max-height: calc(100vh - 120px);
  overflow: scroll;
  }

确认模式的css

.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;  /* I changed this one only */
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

希望对你有帮助

array = [];

$('.openModal').click(function() {
  $('.confirmationModal').css('display', 'block');
});

$('.modal-close').click(function() {
  $('.confirmationModal').css('display', 'none');
});

$('.add-pup').click(function() {
  array.push({
    dog: "woof",
    puppy: "bow",
    barker: "yap",
    waggler: "waggle"
  });
  addPups();
});

addPups = function() {
  var html = "";
  for (var i = 0; i < array.length; i++) {

    html += "<tr>" +
      "<td>" + array[i].dog + "</td>" +
      "<td>" + array[i].puppy + "</td>" +
      "<td>" + array[i].barker + "</td>" +
      "<td>" + array[i].waggler + "</td>" +
      "</tr>";
  }

  document.getElementById("tbody").innerHTML = html;
}

.buttonHolder,
.modal-header,
.modal-footer,
table {
  text-align: center;
  margin: 0 auto;
}
table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 500px;
}
.mytbl {
  overflow: scroll;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
.mytbl {
  max-height: calc(100vh - 120px);
}
.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}
.confirmationContent {
  background-color: #fefefe;
  margin: auto;
  z-index: 9999;
  width: 80%;
}
.confirmationClose {
  position: relative !important;
  float: right;
  margin-right: -16px;
}
#modal-footer {
  text-align: center;
}
.btn,
.btn2 {
  background: #3498db;
  border: none;
  margin: 10px 5px 5px 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.btn:hover,
.btn2:hover {
  background: #3cb0fd;
}
.btn2 {
  background: #FF0000;
}
.btn2:hover {
  background: #EE1122;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonHolder">
  <button class="btn openModal">Open Modal</button>
</div>
<div class="confirmationModal">
  <div class="confirmationContent">
    <div class="modal-header">
      <h3>
        Pup List
      </h3>
    </div>
    <div class="modal-body">
      <div class="mytbl">
        <table>
          <thead>
            <tr>
              <th>
                dog
              </th>
              <th>
                puppy
              </th>
              <th>
                barker
              </th>
              <th>
                waggler
              </th>
            </tr>
          </thead>
          <tbody id="tbody"></tbody>
        </table>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn2 modal-close">No</button>
      <button class="btn add-pup">Add Puppy</button>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

我调整了您的 css 以使表格滚动并保持在模式的中间 - 不漂亮，但我不知道您在寻找什么。关键位在所有封闭的 div 上设置 overflow: none。更改了下面的 CSS 选择器。

table {
  border-collapse: collapse;
}

.modal-body {
  display: inline-block;
  border: 1px solid black;
  max-height:50%;
  overflow: auto;
}

.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: none;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

.confirmationContent {
  background-color: #fefefe;
  text-align: center;
  margin: auto;
  overflow: none;
  z-index: 9999;
  width: 80%;
  height: 80%;
}

【讨论】：