CSS：适合内容的模态框

Question

我正在尝试使用CSS 和一些非常轻量级的jQuery 创建一个简单负责的模态框。

模态框高度需要和里面的内容高度一致，modal box的最大高度就是视口的高度。

做了一些研究，我能够创造出在我的手机、平板电脑、台式机上进行测试时有效且完全负责的东西。

我遇到的问题是使高度适合内容。当内容溢出时，它可以正常工作，因为模态框永远不会高于视口，但是当内容不溢出时，模态框需要适应内容并且不显示所有空白区域。

HTML：

.modal {
  display: none;
  z-index: 75;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto; /* center vert and horiz */
  max-width: 500px;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  padding: 40px 20px;
  border: 5px solid #000;
  background-color: #fff;
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

<a id="openmodal" href="#">open modal</a>
<div class="modal">
    <div class="modal-close">[X] close</div>
    <div class="modal-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
    </div>
</div>

当内容溢出并且工作正常时，这是一个 jsfiddle

https://jsfiddle.net/Lya22f79/1/

这里是jsfiddle，当内容没有溢出，模态框太大，高度需要适合内容时

https://jsfiddle.net/Lya22f79/

Answer 1

.modal {
  display: none;
  z-index: 75;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  max-width: 800px;
  /* Make the height fit the content */
  height: fit-content; 
  width: calc(100vw - 40px);
  margin: auto;
  padding: 40px 20px;
  border: 5px solid #000;
  background-color: #fff;
  overflow: auto;
}

在第二个小提琴中，只需添加height: fit-content，它应该可以完美运行。

Answer 2

这里有limited paragraph text https://jsfiddle.net/Lya22f79/4/ 的解决方案

$("#openmodal").click(function(e) {
  e.preventDefault();
  var modal = $(".modal"); // modal you want to interact with
  modal.css("display", "block");
});

.modal {
  display: none;
  z-index: 75;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  max-width: 800px;
  width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  min-height: auto;
  margin: auto;
  padding: 40px 20px;
  border: 5px solid #000;
  background-color: #fff;
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.modal-content {
  max-height: calc(100vh - 40px);
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="openmodal" href="#">open modal</a>
<div class="modal">
  <div class="modal-close">[X] close</div>
  <div class="modal-content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  
  </div>
</div>

只需删除bottom:0 & 而不是calculated height，使用max-height 作为计算和min-height: auto;。溢出应该隐藏在模态类中。

添加类

.modal-content {
  max-height: calc(100vh - 40px);
  overflow: auto;
}

给你一个解决方案with scrollhttps://jsfiddle.net/Lya22f79/5/

$("#openmodal").click(function(e) {
  e.preventDefault();
  var modal = $(".modal"); // modal you want to interact with  
  modal.css("display", "block");
});

.modal {
  display: none;
  z-index: 75;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  max-width: 800px;
  width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  min-height: auto;
  margin: auto;
  padding: 40px 20px;
  border: 5px solid #000;
  background-color: #fff;
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.modal-content {
  max-height: calc(100vh - 40px);
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="openmodal" href="#">open modal</a>
<div class="modal">
  <div class="modal-close">[X] close</div>
  <div class="modal-content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ligula at ligula ornare, et luctus orci commodo. Ut felis libero, sodales id velit a, porta pretium ipsum. Sed aliquet eros quis metus malesuada, sed mattis nisl dapibus. Vestibulum tristique ac nunc ac tincidunt. Vivamus sed felis a ipsum eleifend porta eu id ante. Sed pharetra mattis tortor, at porta sem maximus luctus. Sed metus nunc, tempus nec eleifend vel, vehicula vel ipsum. Pellentesque non accumsan metus, id tristique nisl. Curabitur dapibus hendrerit ornare. Donec quis pretium nisi, et feugiat dolor. Praesent orci sem, pellentesque dapibus neque laoreet, suscipit posuere velit. Vivamus gravida dignissim tortor id fringilla.</p>
  </div>
</div>

希望这会对你有所帮助。