HR Design System
Modálok

Modálok

A modális ablakok lehetővé teszik a felhasználók figyelmének konkrét feladatra vagy információra történő irányítását a HR portálon, megszakítva a fő felhasználói folyamatot.

Alapvető modálok

Az alapvető modálok olyan felugró ablakok, amelyek a felhasználói figyelem fókuszálására szolgálnak, ideiglenesen megszakítva a fő munkafolyamatot.

Információs modál

Adatok módosítása

A személyes adatainak módosítása a HR részleg jóváhagyása után lép életbe. A folyamat általában 1-2 munkanapot vesz igénybe.

Kódpélda

<!-- Modál háttér -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <!-- Modál tartalom -->
  <div class="bg-white rounded-[4px] w-full max-w-md mx-auto shadow-[0_4px_16px_rgba(0,0,0,0.15)] overflow-hidden">
    <div class="p-6">
      <div class="flex justify-between items-start mb-4">
        <h4 class="text-xl font-medium">Adatok módosítása</h4>
        <button class="text-[#999999] hover:text-[#333333]">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      <p class="text-[#666666] mb-6">
        A személyes adatainak módosítása a HR részleg jóváhagyása után lép életbe. A folyamat általában 1-2 munkanapot vesz igénybe.
      </p>
      <div class="flex justify-end">
        <button class="bg-[#f50537] text-white py-2 px-6 rounded-[4px] hover:bg-[#186c3f] transition-colors">
          Rendben
        </button>
      </div>
    </div>
  </div>
</div>

Megerősítés modál

Szabadság törlése

Biztosan törölni szeretné a kiválasztott szabadságot?

2025.07.15 - 2025.07.30 (12 munkanap)

Kódpélda

<!-- Modál tartalom -->
<div class="bg-white rounded-[4px] w-full max-w-md mx-auto shadow-[0_4px_16px_rgba(0,0,0,0.15)] overflow-hidden">
  <div class="p-6">
    <div class="flex justify-between items-start mb-4">
      <h4 class="text-xl font-medium">Szabadság törlése</h4>
      <button class="text-[#999999] hover:text-[#333333]">
        <i class="fa-solid fa-times"></i>
      </button>
    </div>
    <div class="flex items-center text-[#D32F2F] mb-4">
      <i class="fa-solid fa-exclamation-triangle mr-2"></i>
      <p>Biztosan törölni szeretné a kiválasztott szabadságot?</p>
    </div>
    <p class="text-[#666666] mb-6">
      2025.07.15 - 2025.07.30 (12 munkanap)
    </p>
    <div class="flex justify-end space-x-4">
      <button class="bg-[#f7f7f7] text-[#333333] py-2 px-6 rounded-[4px] border border-[#E0E0E0]">Mégsem</button>
      <button class="bg-[#f50537] text-white py-2 px-6 rounded-[4px] hover:bg-[#186c3f] transition-colors">Törlés</button>
    </div>
  </div>
</div>

Űrlap modálok

Az űrlap modálok lehetővé teszik a felhasználók számára adatok bevitelét anélkül, hogy elhagynák az aktuális oldalt, így gyors és hatékony interakciót biztosítanak.

Rövid űrlap modál

Új kapcsolattartó hozzáadása

Használati irányelvek

A modálok hatékony használatával javíthatjuk a felhasználói élményt, de fontos, hogy betartsuk a legjobb gyakorlatokat és kerüljük a túlzott használatukat.

Mikor használjunk modálokat

  • Rövid és fókuszált interakciókhoz, amelyek megszakítják a fő folyamatot
  • Fontos megerősítések kérésére (pl. törlés, jóváhagyás)
  • Rövid űrlapok kitöltésére, ahol nem szükséges új oldalra navigálni
  • Kritikus információk vagy figyelmeztetések megjelenítésére

Mikor ne használjunk modálokat

  • Hosszú, komplex űrlapokhoz vagy többlépéses folyamatokhoz
  • Nem kritikus információk vagy marketingüzenetek megjelenítésére
  • Egymásba ágyazott modálokhoz (modál a modálban)
  • Olyan tartalomhoz, amelyhez a felhasználónak később vissza kell térnie

Modálok tervezési irányelvei

Tartalom és méretezés

  • A modálok méretét tartsuk a szükséges minimumnál
  • Mobilon a modál teljes szélességű lehet, kis margókkal
  • Asztali nézetben a modál szélessége ne haladja meg a képernyő 50%-át
  • A tartalom legyen tömör és a feladatra összpontosítson

Interakció és kezelés

  • Minden modálnak legyen bezárási lehetősége (X gomb)
  • A modálon kívülre kattintva is lehessen bezárni (opcionális)
  • ESC billentyűvel is lehessen bezárni a modálokat
  • A modál megnyitásakor a fókusz kerüljön a modálra (akadálymentesítés)

Akadálymentesség

  • Használjunk role="dialog" és aria-modal="true" attribútumokat
  • A modál tartalmazzon aria-labelledby attribútumot a címre hivatkozva
  • Zárjuk be a modált a fókusz-csapdát a modálon belül
  • Biztosítsunk megfelelő kontraszt arányt a szöveg és háttér között

Gombok és műveletek

  • A megerősítő modáloknál jobb oldalon legyen az elsődleges művelet
  • A veszélyes műveleteket (pl. törlés) piros színnel jelöljük
  • Az elsődleges művelet legyen kiemelve (pl. telt háttérszín)
  • A modál gombjainak elnevezése legyen egyértelmű és cselekvésorientált