A no-JS modal built on the hidden-checkbox + label[for]
pattern. A trigger opens it, the close button or a backdrop click close it.
Pure form controls, keyboard-operable, degrades to a plain checkbox in
ancient engines.
This is a no-JavaScript modal. Click outside the box or the close button to dismiss. The checkbox state survives form submission too, so you can keep the dialog open across server round-trips if you want.
data-slide)
Add data-slide to .casca-modal-box to slide it
into place. Bare data-slide defaults to top;
explicit values are top, bottom,
left, right. The modal slides back out the way it
came in. Reduced-motion preferences drop the animation automatically.
Quick slide down into place. Closes back upward.
Rises up into place, drops back down on close.
Comes in from the left edge.
Comes in from the right edge.
<div class="casca-modal-box" data-slide> ... <!-- top -->
<div class="casca-modal-box" data-slide="bottom"> ...
<div class="casca-modal-box" data-slide="left"> ...
<div class="casca-modal-box" data-slide="right"> ...<div class="casca-modal">
<input type="checkbox" id="m1" class="casca-modal-input">
<label class="casca-modal-trigger" for="m1">Open</label>
<label class="casca-modal-backdrop" for="m1" aria-hidden="true"></label>
<div class="casca-modal-box" role="dialog" aria-labelledby="m1-t" aria-modal="true">
<h2 id="m1-t" class="casca-modal-title">Title</h2>
<div class="casca-modal-body">Body</div>
<label class="casca-modal-close" for="m1" aria-label="Close">x</label>
</div>
</div>The modal body can host any form. Submitting POSTs to the server which then re-renders the page (with the modal closed by default).