modal-dialog-scrollable
bootstrap5.css
bootstrap5.css
.modal-dialog-scrollable {
height: calc(100% - 1rem);
}
bootstrap5.css
.modal-dialog-scrollable .modal-content {
max-height: 100%;
overflow: hidden;
}
bootstrap5.css
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
bootstrap5.css
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-scrollable {
height: calc(100% - 3.5rem);
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-sm {
max-width: 300px;
}
}
html bootstrap5 Sample
js 長いコンテンツ、スクロールのモーダル:modal-dialog-scrollable
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModalsc">スクロールモーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModalsc"-->
<div class="modal fade" id="exampleModalsc" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog modal-dialog-scrollable" role="document">
<!-- モーダルのコンテンツ -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>