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.