How To Make a Modal Box Using Only CSS?

One question to make things clear…

Q. What is a modal box?

Answer — In User Interface design, a modal window is a window alternative to the main application/document(in case of static HTML web-pages) window. It disables the main window but keeps it visible to create a workflow with the modal window in front of it. The modal window may contain several different boxes or a single box whose purpose depends on the UI design. These boxes are also known as modal dialogue boxes since they often appear as dialogue boxes.

For more info visit Modal Window.

Now talking about pre-requisites …

i. Basic knowledge of general things like paragraphs, background colors, etc.

ii. Basic Knowledge CSS Pseudo Classes

iii. CSS Pseudo Elements will help in some designs (Not necessary for this tutorial).

So, now we have a basic knowledge of what is a modal box, we should ask ourselves why make it using CSS?

The answer is …

1. It just requires knowledge of CSS pseudo-classes features without including JavaScript event handling.

2. CSS parses and renders faster than JavaScript.

3. Failures in CSS are not fatal whereas one mistake in JavaScript will stop the execution immediately and most of the programmers know sometimes how frustrating it is to debug programs.

4. For things like animation, it is easier to make silky smooth animation with CSS than JavaScript.

But the above benefits are heavily subjective and depend upon the situation the developer is in and it is often better to use JavaScript to detect user actions/changes, etc.

Note — I am using Visual Studio Code to do the coding part and use Mozilla Firefox for debugging as this browser has great tools to debug CSS.

Now, I will illustrate the approach below.

The CSS before JavaScript Approach

Step 1 — I will create a div with the class named “button” element with an anchor tag inside to redirect to the modal box.

HTML :-

HTML Code Snippet illustrating button div

Step 2 — Now, I will style the button as shown in the code snippet below.

CSS:-

CSS styling for button div

Output:-

Button div appearance on the main window

Step 3 — I will set the value of the href attribute of the anchor tag to the name “#modal”.

Step 4 — I will make a div element and set its id attribute to the name “modal” and will then style it using CSS.

HTML :-

HTML Code snippet illustrating modal div

CSS:-

CSS Styling for Modal Box

Step-by-Step Guide:-

Initial State Modal Styling

i. I will set the z-index of the modal box to the value 100(any value greater than the maximum z-index of the rest of the elements will work), so, that the box appears above all the HTML elements.

ii. I will set the background color of the modal box different from the body background color so that it appears distinct.

Iii. I will set the value of the position of the box to fixed so that it positions itself according to the browser window thus separating the box from the normal workflow.

iii. I will give width and height so that the div does not cover the entire window and width and height to make it big.

iv. I will give the initial opacity : 0 so that when it transitions to the final state, the animation will look much smoother than the normal sudden appearance.

v. I will set the pointer-events: none to avoid the possible interference of the modal box with the main flow.

vi. I will set the visibility of the initial state to hidden.

Final State Modal Styling

i. Important — I am using target pseudo-class(:class_name) whose work is to change the properties of the selected element to the specified properties when the hash in the URL value matches the value of the mentioned id (Step 3).

ii. The rest of the properties are self-explanatory.

Step 5 — I have added the close button in the modal box with the value of anchor tag href “.index.html”(any value other the specified id/hash value) which is different from the target hash value and hence will close the modal box.

Final Output

1. When the hash value is different than the mentioned id.

Button on main window

2. When the hash value matches the mentioned id “#modal”.

Modal Box as it appears when we click on the button

So, this is how we can create Modal Boxes using only CSS which is easy and avoid the programming aspect completely where one has to learn JavaScript and then implement these type of events. The world has changed and the new CSS3 features allow us to do more things that were not possible in the previous version and enables even a complete beginner to create wonderful things.

Thank You for reading this article.

You can contact me through my E-Mail and you can also view my previous work on my Portfolio.