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>

如果您增加或减少模式top的{{1}}值，您将看到其位置分别向下和向上移动。

如何将模态框向下移动

1 个答案: