CSS : 내용에 맞는 모달 상자

Question

CSS과 매우 가벼운 jQuery을 사용하여 간단한 책임 모달 상자를 만들려고합니다.

모달 상자 높이는 내부 콘텐츠와 동일한 높이가되어야하며 modal box의 최대 높이는 뷰포트의 높이입니다.

일부 연구 조사를 통해 휴대 전화, 태블릿, 데스크톱에서 테스트했을 때 완전히 작동하는 무언가를 만들 수있었습니다.

문제는 콘텐츠에 맞게 높이를 만드는 것입니다. 콘텐츠가 오버플로되면 모달이 뷰포트보다 높을 수 없으므로 제대로 작동하지만 콘텐츠가 오버플로하지 않으면 모달 상자가 콘텐츠에 맞추고 모든 빈 공간을 표시하지 않아야합니다.

는 HTML : 콘텐츠 오버 플로우와 여기 https://jsfiddle.net/Lya22f79/1/

는 jsfiddle의 작품을 좋아하는 경우 내용이 모달 오버 플로우하지 않는 경우

.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/

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

여기 당신은 그냥 bottom:0 & 대신 calculated height의 제거 계산 & min-height: auto;로 max-height를 사용 limited paragraph texthttps://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>

와 함께 솔루션과 함께 할 것입니다. 오버플로는 모달 클래스에서 숨겨야합니다. 여기

.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>

이 당신을 도울 것입니다 희망과 함께 할 것입니다.