FULL-SCREEN MODAL

Nur ein Test für ein Fullscreen Modal

codeply.com Demo

Fullscreen Modal
Starte Modal

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>

</div>