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:
Początkowo w oknie przeglądarki widać tylko przycisk, a okno dialogowe jest 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.
Składnia :modal
Składnia pseudoklasy :modal
:
:modal {...}