Modal
Kedy použiť tento komponent
Komponent použite, keď sa používateľ chystá spraviť akciu, ktorá má nenávratné dôsledky, a teda si potrebujeme overiť rozhodnutie.
Napríklad, vymazanie pracovnej ponuky.
Použitie
Aby tento komponent fungoval správne, element obsahujúci modal musí byť mimo sekcie main a musí mať nasledovné atribúty.
data-module="modal"- Na tento atribút sa inicializujem script, ktorý pracuje s komponentomaria-hidden="true"- Počiatočná hodnota musí byť nastavená na true, týmto zabránime nechcenému prebliku pri inicializáciidata-a11y-dialog="#main"- Určenie main sekcieid="my-dialog"- Určenie indentifikátoru modaludata-a11y-dialog-show="my-dialog"- Tento atribút nastavíme tlačidlu, ktorým chceme modal zobraziť. Hodnota tohto atribútu (my-dialog), je indentifikátor daného modaludata-a11y-dialog-hide="my-dialog"- Tento atribút nastavíme tlačidlu vo vnútri modalu, ktorým chceme modal zatvoriť. Hodnota tohto atribútu (my-dialog), je indentifikátor daného modaluid="my-dialog-title"- Tento atribút slúži na nastavenie nadpisu vo vnútri modaluid="my-dialog-description"- Tento atribút slúži na nastavenie popisu vo vnútri modalu
Voliteľné atribúty
data-a11y-dialog-hide- Ak tento atribút nastavíme elementu, ktorý slúži ako overlay, umožníme používateľovi zatvoriť modal klikom na overlay
Ukážka
<div class="dialog" data-module="modal" id="my-dialog" aria-hidden="true" data-a11y-dialog="#main">
<div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide></div>
<div role="dialog" class="dialog-content govuk-error-summary govuk-!-padding-6" aria-labelledby="my-dialog-title" aria-describedby="my-dialog-description">
<h3 class="govuk-heading-m govuk-!-margin-bottom-1" id="my-dialog-title">Naozaj chcete vymazať túto ponuku?</h3>
<p class="govuk-body" id="my-dialog-description">Údaje o ponuke sa permanentne odstránia a nebudete sa k nim môcť vrátiť.</p>
<div class="govuk-button-group">
<button type="submit" class="govuk-button--warning govuk-!-margin-bottom-0" data-module="govuk-button" data-a11y-dialog-hide="my-dialog">
Áno chcem vymazať
</button>
<a href="#" class="govuk-link govuk-body govuk-!-display-inline-block govuk-!-margin-top-1" data-a11y-dialog-hide="my-dialog" autofocus>Nie, ponechať</a>
</div>
</div>
</div>