Choose a bootstrap 5.x webcomponent ->
Bootstrap Component: Modal
Modal
The Modal component is a dialog box/popup window that is displayed on top of the current page.
Live Preview
<!-- Knapp som triggar modalen -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Modalens dialogruta -->
<div class="modal-dialog">
<!-- Modalens innehåll -->
<div class="modal-content">
<!-- Modalens header -->
<div class="modal-header">
<!-- Modalens titel -->
<h1 class="modal-title fs-5" id="exampleModalLabel">Modalens titel</h1>
<!-- Knapp för att stänga modalen -->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Modalens kropp -->
<div class="modal-body">
Modalens kropp
</div>
<!-- Modalens footer -->
<div class="modal-footer">
<!-- Knapp för att stänga modalen -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<!-- Knapp för att spara ändringar -->
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!--end modal-content -->
</div><!--end modal-dialog -->
</div><!--end modal-->