# 17 - Bootstrap Modal

## 🎯 Co se naučíte

V této lekci se naučíte vytvářet modální okna (pop-up okna) pomocí Bootstrapu.

## 📚 Témata lekce

- **Modal** - modální okno (overlay)
- **Modal struktura** - header, body, footer
- **Data attributes** - `data-bs-toggle`, `data-bs-target`
- **Modal velikosti** - malé, velké, extra velké
- **Scrollable modal** - pro dlouhý obsah
- **Centered modal** - centrované na obrazovce
- **JavaScript Modal API** - otevírání/zavírání přes JS
- **Modal events** - události (show, hide)

## 📂 Soubory v projektu

- `index.html` - HTML s modal komponentou
- `css/bootstrap.css` - Bootstrap CSS
- `js/bootstrap.js` - Bootstrap JS (DŮLEŽITÝ pro modal!)

## 💻 Základní Modal

```html
<!-- Tlačítko pro otevření modalu -->
<button type="button" class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#exampleModal">
    Otevřít modal
</button>

<!-- Modal struktura -->
<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Header -->
            <div class="modal-header">
                <h5 class="modal-title">Nadpis modalu</h5>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal"></button>
            </div>

            <!-- Body -->
            <div class="modal-body">
                <p>Obsah modálního okna...</p>
            </div>

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">Zavřít</button>
                <button type="button" class="btn btn-primary">Uložit</button>
            </div>
        </div>
    </div>
</div>
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Klikněte na tlačítko pro otevření modalu
3. Vyzkoušejte zavření pomocí:
   - Křížku (×)
   - Tlačítka "Zavřít"
   - Kliknutí mimo modal
   - Klávesy Esc
4. Prozkoumejte HTML strukturu modalu
5. Zkuste změnit velikost modalu
6. Přidejte formulář do modal-body

## 💡 Tip pro studenty

### Data attributes:

**Otevření modalu:**
```html
<button data-bs-toggle="modal" data-bs-target="#myModal">
    Otevřít
</button>
```
- **data-bs-toggle="modal"** - zapne modal funkcionalitu
- **data-bs-target="#myModal"** - ID modalu, který se otevře

**Zavření modalu:**
```html
<button data-bs-dismiss="modal">Zavřít</button>
```

### Velikosti modalu:

```html
<!-- Malý modal -->
<div class="modal-dialog modal-sm">

<!-- Normální (výchozí) -->
<div class="modal-dialog">

<!-- Velký -->
<div class="modal-dialog modal-lg">

<!-- Extra velký -->
<div class="modal-dialog modal-xl">

<!-- Celá obrazovka -->
<div class="modal-dialog modal-fullscreen">
```

### Centrovaný modal:

```html
<div class="modal-dialog modal-dialog-centered">
    <!-- vertikálně centrovaný -->
</div>
```

### Scrollable modal (dlouhý obsah):

```html
<div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
        <div class="modal-body">
            <!-- dlouhý obsah zde -->
        </div>
    </div>
</div>
```

### JavaScript API:

```javascript
// Otevření modalu přes JavaScript
var myModal = new bootstrap.Modal(document.getElementById('myModal'))
myModal.show()

// Zavření
myModal.hide()

// Přepnutí (toggle)
myModal.toggle()
```

### Modal events:

```javascript
var modalEl = document.getElementById('myModal')

// Před otevřením
modalEl.addEventListener('show.bs.modal', function () {
    console.log('Modal se otevírá')
})

// Po otevření
modalEl.addEventListener('shown.bs.modal', function () {
    console.log('Modal je otevřený')
})

// Před zavřením
modalEl.addEventListener('hide.bs.modal', function () {
    console.log('Modal se zavírá')
})

// Po zavření
modalEl.addEventListener('hidden.bs.modal', function () {
    console.log('Modal je zavřený')
})
```

## 🎯 Praktické příklady

### Modal s formulářem:

```html
<div class="modal-body">
    <form>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email">
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Heslo</label>
            <input type="password" class="form-control" id="password">
        </div>
    </form>
</div>
```

### Potvrzovací dialog:

```html
<div class="modal-body">
    <p>Opravdu chcete smazat tento záznam?</p>
</div>
<div class="modal-footer">
    <button class="btn btn-secondary" data-bs-dismiss="modal">Ne</button>
    <button class="btn btn-danger" onclick="deleteRecord()">Ano, smazat</button>
</div>
```

## 🎨 Praktické využití

- **Přihlášení/Registrace** - formulář v modalu
- **Potvrzení akce** - "Opravdu smazat?"
- **Detaily produktu** - zobrazení více informací
- **Galerie obrázků** - lightbox efekt
- **Video přehrávač** - YouTube/Vimeo embed
- **Notifikace** - důležité zprávy

## ⚠️ Důležité poznámky

1. **Modal musí mít jedinečné ID**
2. **Bootstrap.js musí být připojen** - modal funguje na JavaScriptu
3. **data-bs-target musí odpovídat ID modalu**
4. **Vnořené modaly se nedoporučují** (modal v modalu)
5. **Backdrop** (tmavé pozadí) se dá vypnout: `data-bs-backdrop="false"`

## 🔗 Související lekce

- **Předchozí:** 16_carousel - Bootstrap carousel
- **Související:**
  - 15_bootstrap_components - ostatní komponenty
  - AI_extra_material/ai_04_prep_bootstrap - vlastní modal implementace
- **Dokumentace:** [Bootstrap Modal](https://getbootstrap.com/docs/5.3/components/modal/)