Creating a CSS modal window (pop-up) step-by-step

Hello again to you, how are you doing today?

I am pretty good.
I spent good part of last week learning about Modals for my internship project, so I thought I would share that with you.

First, I didn't know what a modal was until I asked my Divaloper sister-in-life for help with my project, so maybe you don't know either.
Modal windows are kinda Pop-ups. When you click in something, it opens a window with information.

For my project, I need a card with information to open when a line from a table gets a click. Later in my experiments I found out this cannot be done with CSS only, because of the line element. But simple modals CAN be made with CSS only, so I will talk about those today, because I love pure CSS and its underestimated super powers.

I am still learning myself, and writing tutorials is also new to me, so bear with me ok?

I will give a simple example.

The HTML

First we need to create our button.
I am just putting a link inside a Div.

<div>
  <a href="#modal">Open Modal</a>
<div>

The link gets the href #modal because when clicked it will open our modal div, that we will create now:

<div id="modal">
  <div class="modal__window">
      <a class="modal__close" href="#">X</a>
      <h2>Please to meet you!</h2>
      <p>Hello there, I am a nice Modal Window.</p> 
  </div>
</div>

The div with the ID of modal is our container and the div with the class modal_window is the window that we want to display.
Note this second has a class of modal_close It is the X on the corner that will close our Modal Window when we want to exit it, to it has a href of #

This is the very basic HTML we need, now let's dive into the CSS.

The CSS

Let's start by styling out #modal div

#modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

This will be the background of out window, so the position is fixed because we want it to remain in place. We have a top and left of 0 and the width and height are at 100% because we want this to cover the whole page.
The chosen background color will give us some transparency, so we can still see the contents of our main page.
Display flex, justify-content and align-items are just so our window will be in the center.

SO here is what we have so far:

The modal is created and styled.
now we want to style the window:

.modal__window {
  position: relative;
  background-color: white;
  padding: 4em 2em;
}

.modal__close {
  position: absolute;
  top: -30px;
  right: 0;
}

Here we make the window look like a nice card and we position the X that will close the card, and we have this

Now, let's get down to business.
We need to make the modal disappear and just show up when our link is clicked.

#modal:not(:target) {
    visibility: hidden;
    opacity: 0;
}

This piece of code just says that when #modal is not the target, it stays hidden. So now it will open only when is is the targed, meaning, when we click in our link.
And here is our endgame:

To summarize

We need a link,
we need an element inside a container (in this case, a div inside a div).
We give the container an ID, that was pass as the href of our link.
We use :not(:target) to hide our container until the link is clicked.
And we use another link with href of # to close our modal window.

Are you still with me?

Thank you for bearing with me, this is my first tentative at more technical posts. Plus writing it all down helps me to understand and retain the process better.
Thanks again for reading,

Happy Monday,
XOXO
P.

Comments

[Hacker Gaucho]

it is relevant to say that dialog element (modal) is available natively in Chrome and Opera since 2014 and Edge since 2020, in other browsers we can use the dialog-polyfill

[Pachi 🥑]

Thank you for this info Anderson!

[Ido Shamun]

This is a very nice CSS trick! I was not familiar with the :target selector. One thing we have to bear in mind is the aspect of accessibility which is missing here and like Anderson mentioned is available within the scope of the dialog element

[hidden_dude]

Cool, I guess these days we could build a whole collapsible menubar without a single line of Javascript.

[Artem]

Close the current window by clicking on the gray area.
The gray area is the non-shaped area.
I used JavaScript
.#modal - This is a gray blackout area.

let writeForm = document.getElementById("write");
document.onclick = function(e) {
    console.clear();
    if (e.target != writeForm && !writeForm.contains(e.target)) {
        window.location.replace("#");
    };
    console.info(e.target !== writeForm, !writeForm.contains(e.target));
};

How to do this in pure "css" I don't have idea..

[Serge Paskal]

Great article.
I didn't know neither about :target (supports from Chrome 1) nor <dialog> 🤦 shame on me.
Speaking about the code, just noticed your modal behaves different than the one from MDN: click to grey area doesn't close the popup (::backdrop in case of dialog element). Styling .modal__close:before, .modal__close:after (with z-index) and moving .modal__close itself to #modal's children level do the trick.

[Andreas Huber]

If anyone needs a quickfix - i used the onclick to fix this background closing. It not plain css of course, but it improves usability for my application:

I extended the same logic with
<div id="modal" onclick="location.href='#'"; >
finally the grey background closes like the X before.

[davidvalencia-it]

Buen code! Gracias

[KuruGuru]

Thank you for this. Is it also possible to show the window at the start of the page (and then just close with the x) .. so that I do not have to push the button. Thanks for your support.