jquery - 模态响应高度

Question

我制作了一个 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 来处理响应式设计，但我工作的地方不允许使用这些框架。

感谢您的帮助。

Answer 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>