```

5. Voeg binnen de `modal-header` een `

` element voor de titel van de modal en een `` element voor de sluitknop.

```html

Modale titel

```

6. Voeg een `

` element toe met de klasse `modal-body`. Dit element bevat de hoofdinhoud van de modal, zoals tekst, formulierelementen of afbeeldingen.

```html

```

7. Voeg een `

` element toe met de klasse `modal-footer`. Dit element bevat alle knoppen of acties die u wilt opgeven, zoals een knop 'Opslaan' of 'Sluiten'.

```html

```

8. Voeg de knoppen toe die u wilt opnemen in de `modal-footer`.

```html

Sluiten

Wijzigingen opslaan

```

9. Sluit alle geopende tags, beginnend bij `

` voor `modal-content`, dan `

` voor `modale dialoog`, en tenslotte `

` voor `modaal`.

CSS:

Pas CSS-stijlen toe op uw modaal om het uiterlijk ervan aan te passen. Bijvoorbeeld:

```css

.modaal {

breedte:50%;

}

```

JavaScript:

Om de functionaliteit van de modal in te schakelen, moet u JavaScript gebruiken. Hier ziet u hoe:

1. Importeer de Bootstrap JavaScript-bibliotheek in uw HTML-bestand.

```html

```

2. Gebruik JavaScript om de modal te initialiseren. U kunt dit doen door als volgt een script te schrijven:

```javascript

var myModal =nieuwe bootstrap.Modal(document.getElementById('exampleModal'), {

toetsenbord:vals

})

```

Deze JavaScript-code initialiseert de modal met de opgegeven ID (#exampleModal) en voorkomt dat deze wordt gesloten door op de Esc-toets te drukken (door de optie `keyboard` in te stellen op `false`).

En dat is het! Door deze stappen te volgen en HTML, CSS en JavaScript te combineren, kunt u eenvoudig een functionele en aanpasbare modale pop-up maken met behulp van Bootstrap 5.