Modal
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.
Basic (fade)
Confirm action
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.
Slide variants (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.
Slide from top
Quick slide down into place. Closes back upward.
Slide from bottom
Rises up into place, drops back down on close.
Slide from left
Comes in from the left edge.
Slide from right
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>With a form inside
The modal body can host any form. Submitting POSTs to the server which then re-renders the page (with the modal closed by default).