Skip to content

Modal No JS

Create a modal without the need for JavaScript

Published by Vincent Pickering

In general a modal as a UX mechanisim is bad, but there are a few edge cases where they serve a viable purpose on your website.

Recently I had to create a modal for a client that required no JavaScript. Here is how I solved it.

See the Pen Modal - NoJS by Vincent Pickering (@vipickering) on CodePen.

Essentially, I am using a radio button to act as the mechanisim to show/hide an overlay. In this case an SVG blur is drawn over the content to prevent clicking, and its content is stacked above it.

I haven’t found an issue with this working in modern browsers, or mobile browsers yet. It may be a solution you find useful.