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:
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 {...}