Prekočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Späť

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 komponentom
  • aria-hidden="true" - Počiatočná hodnota musí byť nastavená na true, týmto zabránime nechcenému prebliku pri inicializácii
  • data-a11y-dialog="#main" - Určenie main sekcie
  • id="my-dialog" - Určenie indentifikátoru modalu
  • data-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 modalu
  • data-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 modalu
  • id="my-dialog-title" - Tento atribút slúži na nastavenie nadpisu vo vnútri modalu
  • id="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>