Simple modal (без JS)
Посилання-якір з href на id модалки + :target у CSS дозволяють показати/сховати модальне вікно без жодного JavaScript.
Код
<a href="#demo-modal" style="display:inline-block;padding:0.5rem 1rem;background:#1f6feb;color:#fff;border-radius:6px;text-decoration:none">Відкрити модалку</a>
<div id="demo-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);align-items:center;justify-content:center">
<div style="background:#fff;padding:1.5rem;border-radius:8px;max-width:320px">
<p>Це модальне вікно без JavaScript.</p>
<a href="#" style="color:#1f6feb">Закрити</a>
</div>
</div>
<style>#demo-modal:target { display: flex; }</style>
Попередній перегляд
Пояснення
:target у CSS застосовується до елемента, чий id збігається з хешем поточного URL. Клік по посиланню-якорю змінює хеш і "активує" модалку без жодного скрипта.
- Для складнішої поведінки (закриття по Escape, фокус-трапка) без JS вже не обійтись — тоді варто перейти на <dialog> з мінімумом JS.