Simple modal (no JS)
An anchor link pointing to the modal's id, combined with :target in CSS, shows and hides a modal without any JavaScript.
Code
<a href="#demo-modal" style="display:inline-block;padding:0.5rem 1rem;background:#1f6feb;color:#fff;border-radius:6px;text-decoration:none">Open modal</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>This is a modal with no JavaScript.</p>
<a href="#" style="color:#1f6feb">Close</a>
</div>
</div>
<style>#demo-modal:target { display: flex; }</style>
Preview
Explanation
CSS :target applies to the element whose id matches the current URL's hash. Clicking the anchor link changes the hash and "activates" the modal with zero script.
- For more advanced behavior (closing on Escape, focus trapping) you'll need JS at some point — consider a native <dialog> element with minimal JS.