How to create Modal without JavaScript

You have been using jquery or Vanilla JS to build modals because that’s the only way you knew. You knew that JS was required to build modals.
Well, Here is the scroll of truth for you!

You don’t need JavaScript to build Modals!

Yes! You read it right. In fact, creating a modal without JavaScript isn’t really a Rocket science. We will see the core concept and then we will see a working example along with a Vue component.

Core Concept

We utilize the :target pseudo-class to show and hide the modal. For navigating to and away from modal, we provide the id of modal element to href attribute of anchor tag.

You might want to style your anchor tag like a button. Bootstrap “btn” classes can be applied to both “button” and “a” tag

Steps

• Use an anchor tag and set its href attribute to id of modal.
• Use another anchor tag and set its href atrribute to “#”. this will move away from the modal element.

But where is the :target pseudo-class?

:target is used to display the modal while href is used to move to or move away from modal element.
By default, Your modal should be hidden.

Code

The code is available in embedded pen. Code is well commented. However, if you still have questions, ask them in Response.

Modal without JavaScript

Here is the Vue Component of modal. It’s a bit different as it’s quite old. I might update it sometime.