javascript - 如何确保我的弹出窗口位于屏幕中间？无论我在页面上滚动到哪里

Question

我正在关注一个基本联系人弹出表单的教程，它工作正常。

但是，弹出窗口固定在顶部的屏幕中心。我该如何解决这个问题，以便我的弹出窗口固定在屏幕的中心，无论您在页面上滚动到何处。

document.getElementById('git-btn').addEventListener("click", function() {
  document.querySelector('.bg-modal').style.display = "flex";
});

document.querySelector('.close').addEventListener("click", function() {
  document.querySelector('.bg-modal').style.display = "none";
});

.bg-modal {
  width: 100%;
  height: 100%;
  background-color: rgba (0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  display: none;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 500px;
  height: 550px;
  background-color: #F2F2F2;
  border: 4px solid #4161BF;
  text-align: center;
  padding: 40px;
  position: relative;
}

<button id="git-btn">Show modal</button>
<div class="bg-modal">
  <div class="modal-content">
    <div class="close">+</div>
    <i class="fas fa-envelope fa-2x" style="color:#4161BF"></i>
    <form action="">

      <div class="form-name">
        <input type="text" placeholder="Name">
      </div>

      <div class="form-email">
        <input type="text" placeholder="E-mail">
      </div>

      <div class="form-input">
        <textarea rows="2" placeholder="Your Message"></textarea>
      </div>

    </form>
  </div>
</div>

标签： javascriptjquerycss

Answer 1

您需要将 bg-modal 的位置设置为固定，将其设置为顶部：0，左侧：0，也在 JavaScript 文件中使其显示为块。现在在 modal-content 中，以及您想要完全居中的每个元素中，将位置设置为绝对，顶部：50%，左侧：50%，然后转换：translate(-50%, -50%)。

document.getElementById('git-btn').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "block";
});

document.querySelector('.close').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "none";
});

.bg-modal{
    width: 100vw;
    height: 100vh;
    background-color: rgba (0, 0, 0, 0.7);
    position: fixed;
    display: none;
    top: 0;
    left: 0;
}

.modal-content{
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #F2F2F2;
    border: 4px solid #4161BF;
    text-align: center;
    padding: 40px;
}

<button id="git-btn">Open</button>
<button class="close">Close</button>
<div class="bg-modal">
    <div class="modal-content">
        <div class="close">+</div>
        <i class="fas fa-envelope fa-2x" style="color:#4161BF"></i>
        <form action="">
            <div class="form-name">
            <input type="text"  placeholder="Name">
            </div>

            <div class="form-email">
            <input type="text" placeholder="E-mail">
            </div>
            
            <div class="form-input">
            <textarea rows="2"  placeholder="Your Message"></textarea>
            </div>
        </form>
    </div>
</div>