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.