模态

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或基础来处理响应式设计，但这些框架在我工作的地方是不允许的。

感谢您的帮助。

Answer 1

Updated Code Here

我把这张桌子放在一个div中，上面是班级＆＃34; mytbl＆＃34;

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);
}

希望这可以帮到你

＆＃13;

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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%;
}