html - 垂直居中模态，滚动大内容

Question

我有以下用于模式的 CSS 和 HTML:

div.backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2020;
}

div.modal {
  background-color: white;
  border: 1px solid red;
  margin: 10% auto;
  max-width: 800px;
  width: 80%;
}

<h1>Page main content</h1>

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</p>

<img src="https://via.placeholder.com/800x120.png"/>

<div class="backdrop">

  <div class="modal">
    
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </p>
    
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </p>
    
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </p>

  </div>

</div>

如何使模态框垂直居中，并在顶部和底部留出边距？

当内容达到高度时，模式内容应该滚动，而不是像现在这样的模式本身。

Answer 1

第一个问题:

How to center the modal vertically, leaving a margin on top and bottom?

最简单的方法是从模态框的父元素中创建一个Flexbox。这样您就可以确保模态框垂直和水平居中。

div.backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2020;
  display: flex;  //Added this
  justify-content: center;  //Added this
  align-items: center;  //Added this
}

要在顶部和底部留出边距，您必须为模态框设置 max-height。

div.modal {
  background-color: white;
  border: 1px solid red;
  margin: 10% auto;
  max-width: 800px;
  width: 80%;
  max-height: calc(100% - 40px); //Added this so there will always be 20px free space on the top and bottom.
}

div.backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2020;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.modal {
  background-color: white;
  border: 1px solid red;
  margin: 10% auto;
  max-width: 800px;
  width: 80%;
  max-height: calc(100% - 40px);
}

<h1>Page main content</h1>

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

<img src="https://via.placeholder.com/800x120.png" />

<div class="backdrop">

  <div class="modal">

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

  </div>

</div>

但是可以看到一个小问题。文本在底部超出范围，这导致我们提出您的第二个问题:

第二个问题:

And when the content is to height the modal content should scroll and not the modal itself as it is now.

为了做到这一点并解决上述问题，让我们添加一个滚动条:

div.modal {
  background-color: white;
  border: 1px solid red;
  margin: 10% auto;
  max-width: 800px;
  width: 80%;
  max-height: calc(100% - 40px); //Added this so there will always be 20px free space on the top and bottom.
  overflow-x: auto; //Added this to add the scroll bar
}

这是最终(工作)结果:

div.backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2020;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.modal {
  background-color: white;
  border: 1px solid red;
  margin: 10% auto;
  max-width: 800px;
  width: 80%;
  max-height: calc(100% - 40px);
  overflow: auto;
}

<h1>Page main content</h1>

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

<img src="https://via.placeholder.com/800x120.png" />

<div class="backdrop">

  <div class="modal">

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

  </div>

</div>

编辑:

实际上您有一些不需要的 CSS 属性。我做了一个模态的简单例子。

.backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  border: 1px solid red;
  margin: 10% auto;
  max-width: 800px;
  width: 80%;
  max-height: calc(100% - 40px);
  overflow: auto;
}

<h1>Page main content</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

<img src="https://via.placeholder.com/800x120.png" />

<div class="backdrop">
  <div class="modal">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>

我能想到的最干净的方法是同时删除 body 的溢出。我还添加了一些关闭和打开机制:

function openmodal() {
  document.querySelector("body").classList.toggle("overflow-hidden");
  document.querySelector(".backdrop").style.display = "flex";
}

function closemodal() {
  if (event.target == document.querySelector(".backdrop")) {
    document.querySelector("body").classList.toggle("overflow-hidden");
    document.querySelector(".backdrop").style.display = "none";
  }
}

body {
  overflow: auto;
}

.backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  border: 1px solid red;
  margin: 10% auto;
  max-width: 800px;
  width: 80%;
  max-height: calc(100% - 40px);
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

<h1>Page main content</h1>
<button onclick="openmodal()">
Clik me
</button>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

<img src="https://via.placeholder.com/800x120.png" />

<div class="backdrop" onclick="closemodal()">
  <div class="modal">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>