Gdzie wykorzystać ten przykład?
Potwierdzenia akcji i krótkie komunikaty. Wariant „Komunikaty: komunikat na górze” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Przykład pokazuje wygląd powiadomienia. Wyzwolenie, czas widoczności i zamknięcie można połączyć z akcją użytkownika.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem
</body>. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Nie potwierdzaj zapisu przed odpowiedzią serwera. Błędy wymagające reakcji powinny pozostać widoczne do odczytania.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Komunikaty: komunikat na górze
HTML
<div class="effect"><button class="show-toast" type="button">Pokaż komunikat ↗</button><div class="message-pack" role="status" hidden><i aria-hidden="true">!</i><span>Komunikaty</span><button type="button" aria-label="Zamknij komunikat">×</button></div></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.show-toast{border:0;border-radius:6px;background:#e95b30;color:white;padding:13px 20px}.message-pack{position:fixed;z-index:20;max-width:calc(100vw - 30px);background:#e95b30;color:#fff;display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:8px;box-shadow:0 7px 20px #0002;right:15px;top:15px;border-bottom:4px solid #fff7}.message-pack[hidden]{display:none}.message-pack i{font-style:normal;font-size:20px}.message-pack span{font-size:13px;overflow-wrap:anywhere}.message-pack button{border:0;background:none;color:inherit;font-size:22px}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}
JavaScript
const message=document.querySelector('.message-pack');let timer;
document.querySelector('.show-toast').addEventListener('click',()=>{clearTimeout(timer);message.hidden=false;timer=setTimeout(()=>message.hidden=true,4000)});
message.querySelector('button').addEventListener('click',()=>{message.hidden=true;clearTimeout(timer)});