Bootstrap 4 modal full screen

Mattepuffo's logo
Bootstrap 4 modal full screen

Bootstrap 4 modal full screen

Per un progetto ho usato il modal di Bootstrap 4 come loading page.

Ovviamente avevo la necessità di visualizzarlo full screen.

Vi posto il codice HTML e CSS che ho usato.

Partiamo dal modal:

<div class="modal" id="modal_wait" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="container h-100">
                    <div class="row align-items-center h-100">
                        <div class="col-6 mx-auto text-center">
                            <i class="fa fa-spinner fa-5x fa-spin"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Questo il CSS:

#modal_wait {
    min-width: 100%;
    margin: 0;
}

#modal_wait .modal-content {
    min-height: 100vh;
    background-color: #fff265;
}

#modal_wait .modal-dialog {
    min-width: 100%;
    margin: 0;
}

Online ho visto che anche altre soluzioni proposte; a me ha funzionato solo questa, ma magari dipende dal resto della mia pagina.

Enjoy!


Condividi

Commentami!