javascript - 如何将模态框向下移动

Question

我正在尝试将模态框本身移至屏幕下方。我看到了很多其他答案，但没有一个有效。

var modal = document.getElementById("myModal");
modal.style.display = "block";
function closeModal() {
  modal.style.display = "none";
}

.modal {
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  padding-top: -600px; /* Location of the box */
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <h4 id="pHasNoBlock" style="font-family: 'Press Start 2P'">Did the robot pick up a block at the clicked location?</h4>
    <h4 id="pHasBlock" style="font-family: 'Press Start 2P'; display: none">Did the robot deliver a block at the highlighted location?</h4>
    <button class="modalButtonYes" onclick="closeModal()">Yes</button>
    <button class="modalButtonNo" onclick="closeModal()">No</button> 
  </div>
</div>

我尝试使用 padding-top 元素来降低它。这适用于 w3schools，但不适用于我的网站本身。我不确定是否存在其他冲突。

Answer 1

首先，padding-top 不允许有负值，因此它不会影响模态框的位置。在 MDN 阅读更多关于 padding 的信息.

如果您想将模态框放在页面的更下方，请尝试使用 position:absolute 并在 px 中设置与顶部的所需距离:

var modal = document.getElementById("myModal");
modal.style.display = "block";
function closeModal() {
  modal.style.display = "none";
}

.modal {
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  left: 50px;
  top: 150px;
  position: absolute;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <h4 id="pHasNoBlock" style="font-family: 'Press Start 2P'">Did the robot pick up a block at the clicked location?</h4>
    <h4 id="pHasBlock" style="font-family: 'Press Start 2P'; display: none">Did the robot deliver a block at the highlighted location?</h4>
    <button class="modalButtonYes" onclick="closeModal()">Yes</button>
    <button class="modalButtonNo" onclick="closeModal()">No</button> 
  </div>
</div>

如果您增加或减少模态 class 的 top 值，您将看到它的位置分别向下和向上移动。