Bootstrap4 Modal box

Modal box (Modal) Is a child form that overrides the parent form . usually , The purpose is to display content from a single source , You can have some interaction without leaving the parent form . Subform can provide information interaction, etc .


How to create a modal box

The following example creates a simple modal box effect :

example

<!-- Button : Used to open the modal box --> < button type = " button " class = " btn btn-primary " data-toggle = " modal " data-target = " #myModal " > Open the modal box </ button > <!-- Modal box --> < div class = " modal fade " id = " myModal " > < div class = " modal-dialog " > < div class = " modal-content " > <!-- Modal box head --> < div class = " modal-header " > < h4 class = " modal-title " > Modal box head </ h4 > < button type = " button " class = " close " data-dismiss = " modal " > &times; </ button > </ div > <!-- Modal box body --> < div class = " modal-body " > Modal box content .. </ div > <!-- At the bottom of the modal box --> < div class = " modal-footer " > < button type = " button " class = " btn btn-secondary " data-dismiss = " modal " > close </ button > </ div > </ div > </ div > </ div >

Give it a try »

Modal box size

We can add .modal-sm Class to create a small modal box ,.modal-lg Class can create a large modal box .

The size class is placed in <div> Elemental .modal-dialog After class :

example - Small modal box

< div class = " modal-dialog modal-sm " >

Give it a try »

example - Large modal box

< div class = " modal-dialog modal-lg " >

Give it a try »