[英]CSS: modal box that fits the content
I'm trying to create a simple responsible modal box using CSS
and some very light jQuery
. 我正在尝试使用CSS
和一些非常简单的jQuery
创建一个简单的负责任的模式框。
The modal box height needs to be the same height as the content inside, and the maximum height of the modal box
is the height of the viewport. 模态框的高度必须与内部内容的高度相同,并且modal box
的最大高度是视口的高度。
Did some research and I was able to create something that works and is totally responsible when tested on my phone, tablet, desktop. 经过一些研究,当我在手机,平板电脑和台式机上进行测试时,我能够创建出行之有效的产品并承担全部责任。
The problem i'm having is making the height to fit the content. 我遇到的问题是使高度适合内容。 When the content overflows, it works ok because the modal will never be higher than the viewport, but when the content does not overflow, the modal box needs to fit to the content and not show all that blank space. 当内容溢出时,它可以正常工作,因为模态永远不会高于视口,但是当内容不溢出时,模态框需要适合内容并且不显示所有空白。
HTML: 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>
Here's a jsfiddle when the content overflows and works ok 这是内容溢出并正常运行时的jsfiddle
https://jsfiddle.net/Lya22f79/1/ https://jsfiddle.net/Lya22f79/1/
Here's a jsfiddle
when the content does not overflow and the modal box is too big and the height needs to fit the content 这是一个jsfiddle
当内容没有溢出并且模式框太大并且高度需要适合内容时
https://jsfiddle.net/Lya22f79/ https://jsfiddle.net/Lya22f79/
Here you go with a solution with limited paragraph text
https://jsfiddle.net/Lya22f79/4/ 在这里,您可以使用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>
Just remove bottom:0
& instead of calculated height
, use max-height
as calculated & min-height: auto;
只需删除bottom:0
而不是calculated height
,就可以使用max-height
和min-height: auto;
. 。 Overflow should be hidden in modal class. 溢出应隐藏在模式类中。
Added class 上课
.modal-content {
max-height: calc(100vh - 40px);
overflow: auto;
}
Here you go with a solution with scroll
https://jsfiddle.net/Lya22f79/5/ 在这里,您可以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>
Hope this will help you. 希望这会帮助你。
.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;
}
In the second fiddle just add height: fit-content
and it should work perfectly. 在第二个小提琴中,只需增加height: fit-content
,它应该可以完美地工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.