Generator modali CSS

Co obejmuje wygenerowany CSS

Kod stylizuje pięć klas:

• .modal-backdrop: stała warstwa na cały ekran, ciemne półprzezroczyste tło (rgba(17, 24, 39, .62)), wyśrodkowana siatka i 24 px odstępu wokół panelu.
• .modal-panel: biała karta o szerokości min(100%, Npx), twój promień zaokrąglenia, miękki cień i przycięte rogi.
• .modal-header: 4-pikselowy pasek akcentu w twoim kolorze, poniżej obszar nagłówka z dopełnieniem 20 px 24 px.
• .modal-body: obszar treści z dopełnieniem 18 px 24 px.
• .modal-actions: wyrównany do prawej wiersz przycisków z odstępem 10 px.

Pasująca struktura HTML

CSS oczekuje takiego znacznika:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Potwierdź</h2>
    </div>
    <div class="modal-body">
      <p>Czy na pewno chcesz kontynuować?</p>
    </div>
    <div class="modal-actions">
      <button>Anuluj</button>
      <button>Kontynuuj</button>
    </div>
  </div>
</div>

Trzymaj panel wewnątrz tła: tło jest warstwą stałą, a panel jest w nim wyśrodkowany. Aby otworzyć i zamknąć modal, wstawiaj i usuwaj tło z kodu aplikacji albo przełączaj jego widoczność.

Dopasowanie do małych ekranów

Szerokość panelu jest ograniczana przez min(100%, Npx), więc ustawienie 520 px na wąskim telefonie staje się pełną szerokością okna przeglądarki pomniejszoną o 24 px odstępu tła. Wiersz akcji pozostaje wyrównany do prawej, a długa treść przewija się razem ze stroną. W typowych przypadkach nie są potrzebne media queries.

Uwagi i ograniczenia

Generator tworzy wyłącznie CSS. Nie zawiera JavaScriptu do otwierania i zamykania modala, zatrzymywania fokusa klawiatury ani obsługi klawisza ESC. Tę logikę dodajesz w swojej aplikacji.

Nagłówek zawsze ma swój 4-pikselowy pasek akcentu; jeśli nie jest ci potrzebny, usuń lub zmień kolor tej reguły w skopiowanym kodzie.