Pseudoklasa CSS :modal

> Dodaj do ulubionych

Pseudoklasa CSS :modal wybiera element, który jest w stanie modalnym, tzn. uniemożliwia interakcję użytkownika z jakimikolwiek innymi elementami na stronie. W HTML elementem, który spełnia te warunki jest dialog, czyli element służący do wyświetlania okien dialogowych.

Przykład użycia :modal

Pseudoklasa :modal wybiera elementy w stanie modalnym, takie jak element HTML dialog. Spójrz na poniższy kod:

<style>
  :modal {
    background-color: lightpink;
  }
</style>
...
<dialog>To jest okno dialogowe</dialog>
<button>Kliknij</button>
<script>
  let button = document.querySelector("button");
  let dialog = document.querySelector("dialog");
  button.addEventListener('click', () => {
    dialog.showModal();
  });
</script>

Początkowo w oknie przeglądarki widać tylko przycisk, a okno dialogowe jest ukryte:

Okno dialogowe ukryte

Kiedy użytkownik kliknie przycisk Kliknij, skrypt wywoła funkcję JavaScript showModal() obiektu dialog, co spowoduje wyświetlenie okna dialogowego.

To okno dialogowe jest wyświetlane w trybie modalnym, więc zostanie wybrane przez powyższą regułę CSS, która zmienia kolor tła na jasnoróżowy. Spójrz na poniższy zrzut ekranu.

Okno dialogowe widoczne

Składnia :modal

Składnia pseudoklasy :modal:

:modal {...}