Create a modal popup without using any JavaScript — just with HTML and CSS.

🎙️ SCRIPT:

Hi everyone, and welcome to this short video!

Today, I’m going to show you how to create a modal popup without using any JavaScript — just with HTML and CSS.

Let’s get started.

🧱 First, we have a button styled as a label element.
When users click this button, it will trigger a hidden checkbox using the for attribute and the matching checkbox id.

This checkbox acts as the toggle for the modal.

🕵️‍♂️ In the CSS, the checkbox is hidden using display: none.
Then, we use a CSS selector:

css
Copy
Edit
.show-modal-input:checked + .modal
This means:
“When the checkbox is checked, show the modal by setting its display to flex.”

💡 Each modal is wrapped inside a group-modal container.
To support multiple modals, we simply use different IDs for each checkbox and for attribute, like:

show-modal-one

show-modal-two

This way, each button controls its own modal independently.

🖼 Inside the modal, we have:

a header

some content

and a close button, which is just another label that unchecks the checkbox when clicked.

It’s simple, lightweight, and doesn’t require any JavaScript at all!

✨ You can customize the modal styles, animation, colors, and structure however you like.

This is a great approach if you want to build quick, accessible, and dependency-free modals using only HTML and CSS.

Thanks for watching, and I hope this helps you create your own modals with ease.

Don’t forget to like and subscribe if you found this helpful.
See you next time!

Видео Create a modal popup without using any JavaScript — just with HTML and CSS. канала CSS tricker