6. Lägg till ett `
`-element med klassen `modal-body`. Detta element kommer att innehålla huvudinnehållet i modalen, såsom text, formulärelement eller bilder.
```html
```
7. Lägg till ett `
`-element med klassen `modal-footer`. Det här elementet kommer att innehålla alla knappar eller åtgärder som du vill tillhandahålla, till exempel en "Spara"- eller "Stäng"-knapp.
```html
```
8. Lägg till de knappar du vill inkludera i `modal-sidfoten`.
```html
```
9. Stäng alla öppna taggar, med början från `
` för `modal-content`, sedan `
` för `modal-dialog`, och slutligen `
` för `modal`.
CSS:
Använd CSS-stilar på din modal för att anpassa dess utseende. Till exempel:
``` css
.modal {
bredd:50%;
}
```
JavaScript:
För att aktivera modalens funktionalitet måste du använda JavaScript. Så här gör du:
1. Importera Bootstrap JavaScript-biblioteket till din HTML-fil.
```html
```
2. Använd JavaScript för att initiera modalen. Du kan göra detta genom att skriva ett manus enligt följande:
```javascript
var myModal =new bootstrap.Modal(document.getElementById('exampleModal'), {
tangentbord:falskt
})
```
Denna JavaScript-kod initierar modalen med det angivna ID:t (#exampleModal) och förhindrar att den stängs genom att trycka på Esc-tangenten (genom att ställa in alternativet `tangentbord` till `false`).
Och det är det! Genom att följa dessa steg och kombinera HTML, CSS och JavaScript kan du enkelt skapa en funktionell och anpassningsbar modal popup med Bootstrap 5.
