Die CSS für das "Fullscreen Modal":gefunden auf "
codeply.com"
.modal-full {
min-width: 100%;
margin: 0;
}
.modal-full .modal-content {
min-height: 100vh;
}
Das Modal:
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Launch modal</a>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-full" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4" id="result">
<p>The grid inside the modal is responsive too..</p>
<div class="row">
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
<div class="col-sm-6 col-lg-3">
Content
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
</div>
</div>
</div>