6. Legg til et `
`-element med klassen `modal-body`. Dette elementet vil inneholde hovedinnholdet i modalen, for eksempel tekst, skjemaelementer eller bilder.
```html
```
7. Legg til et `
`-element med klassen `modal-footer`. Dette elementet vil inneholde alle knapper eller handlinger du vil gi, for eksempel en "Lagre"- eller "Lukk"-knapp.
```html
```
8. Legg til knappene du vil inkludere i `modal-bunnteksten`.
```html
```
9. Lukk alle åpne koder, fra `
` for `modal-content`, deretter `
` for `modal-dialog`, og til slutt `
` for `modal`.
CSS:
Bruk CSS-stiler på din modal for å tilpasse utseendet. For eksempel:
```css
.modal {
bredde:50 %;
}
```
JavaScript:
For å aktivere funksjonaliteten til modalen, må du bruke JavaScript. Slik gjør du det:
1. Importer Bootstrap JavaScript-biblioteket til HTML-filen.
```html
```
2. Bruk JavaScript for å initialisere modalen. Du kan gjøre dette ved å skrive et skript som følger:
```javascript
var myModal =new bootstrap.Modal(document.getElementById('exampleModal'), {
tastatur:falsk
})
```
Denne JavaScript-koden initialiserer modalen med den spesifiserte IDen (#exampleModal) og forhindrer den fra å bli lukket ved å trykke på Esc-tasten (ved å sette "tastatur"-alternativet til "false").
Og det er det! Ved å følge disse trinnene og kombinere HTML, CSS og JavaScript, kan du enkelt lage en funksjonell og tilpassbar modal popup ved å bruke Bootstrap 5.