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

在這里，您可以使用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 scroll https://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> 

希望這會幫助你。

Answer 2

.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 ，它應該可以完美地工作。