6. Pridajte prvok `
` s triedou `modal-body`. Tento prvok bude obsahovať hlavný obsah modálu, ako je text, prvky formulára alebo obrázky.
```html
```
7. Pridajte prvok `
` s triedou `modal-footer`. Tento prvok bude obsahovať všetky tlačidlá alebo akcie, ktoré chcete poskytnúť, ako napríklad tlačidlo „Uložiť“ alebo „Zatvoriť“.
```html
```
8. Pridajte tlačidlá, ktoré chcete zahrnúť do „modálnej päty“.
```html
```
9. Zatvorte všetky otvorené značky, počnúc od `
` pre `modal-content` a potom `
` pre `modal-dialog` a nakoniec `
„pre „modálny“.
CSS:
Použite štýly CSS na svoj modal, aby ste si prispôsobili jeho vzhľad. Napríklad:
```css
.modal {
šírka:50 %;
}
```
JavaScript:
Ak chcete povoliť funkčnosť modálu, musíte použiť JavaScript. Tu je postup:
1. Importujte knižnicu JavaScript Bootstrap do súboru HTML.
```html
```
2. Na inicializáciu modálu použite JavaScript. Môžete to urobiť napísaním skriptu takto:
```javascript
var myModal =new bootstrap.Modal(document.getElementById('exampleModal'), {
klávesnica:nepravda
})
```
Tento kód JavaScript inicializuje modál so zadaným ID (#exampleModal) a zabraňuje jeho zatvoreniu stlačením klávesu Esc (nastavením možnosti „klávesnica“ na hodnotu „false“).
A je to! Nasledovaním týchto krokov a kombináciou HTML, CSS a JavaScriptu môžete jednoducho vytvoriť funkčné a prispôsobiteľné modálne popup pomocou Bootstrap 5.