Gdzie wykorzystać ten przykład?
Dodatkowe informacje oraz potwierdzenia. Wariant „Okna dialogowe: dialog z obrysem” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Wariant określa układ warstwy i sposób jej pokazania. Sprawdź kod JavaScript, aby podpiąć wyzwalacz do właściwego przycisku.
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ę?
Zapewnij możliwość zamknięcia i powrotu do przycisku otwierającego. Nie pokazuj nieoczekiwanych okien podczas czytania.
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: Okna dialogowe: dialog z obrysem
HTML
<div class="effect"><button class="show-modal" type="button">Otwórz dialog ↗</button><dialog class="dialog-pack"><button class="close-modal" type="button" aria-label="Zamknij okno">×</button><div class="dialog-art" aria-hidden="true">◇</div><div class="dialog-content"><small>TWÓJ PROJEKT / TWÓJ WYBÓR</small><h2>Okna dialogowe</h2><p>W tym miejscu możesz umieścić treść, formularz albo ważną informację dla użytkownika.</p><button class="confirm-modal" type="button">Rozumiem →</button></div></dialog></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-modal,.confirm-modal{border:0;border-radius:6px;padding:12px 19px;background:#e95b30;color:white;font-size:13px}.dialog-pack{position:fixed;border:1px solid #d8e2cc;border-radius:12px;padding:35px;width:min(500px,92vw);max-height:90dvh;overflow:auto;color:#2d4023;background:#fff;text-align:left;border:2px solid #e95b30}.dialog-pack[open]{display:block}.dialog-pack::backdrop{background:#1d2c1499;backdrop-filter:blur(4px)}.close-modal{position:absolute;top:10px;right:14px;font-size:25px;border:0;background:none;color:inherit}.dialog-art{display:none;font-size:45px;color:#e95b30;margin-bottom:20px}.dialog-pack small{font:9px monospace;color:#8e9f7d;letter-spacing:1px}.dialog-pack h2{font-size:28px;margin:20px 0;line-height:1.15}.dialog-pack p{font-size:13px;color:#869773;line-height:1.8}.confirm-modal{margin-top:15px}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}
JavaScript
const dialog=document.querySelector('.dialog-pack');
document.querySelector('.show-modal').addEventListener('click',()=>dialog.showModal());
dialog.querySelectorAll('.close-modal,.confirm-modal').forEach(button=>button.addEventListener('click',()=>dialog.close()));
dialog.addEventListener('click',e=>{const r=dialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close()});