3I_WTL_2025/17_modal

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

<!-- 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:

<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:

<button data-bs-dismiss="modal">Zavřít</button>

Velikosti modalu:

<!-- 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:

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

Scrollable modal (dlouhý obsah):

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

JavaScript API:

// 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:

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:

<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:

<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