Страницы Интернета

To begin, we’ll need some generic content that is always visible on the page. We don’t need anything fancy, just some text for now. I used a basic heading and a paragraph:

So far so good, now let’s move onto the button that will toggle our modal window off and on.

In this article, commenters voted to see more tutorials on how to override checkboxes to create pure CSS click events, so that’s exactly what we’re going to do here!

How this works is fairly simple. We start with an input with a type of “checkbox” with a basic text label attached like so:

As you can see, the “label for” section matches the ID of the input. This is important! The neat functionality here is that, even if we hide the actual checkbox, which is exactly what we’re going to do, that label can serve as a clickable item that toggles the checked state of the box.

Now it’s time to finish up our HTML by adding in the actual modal window code. After the checkbox, create a div with a class of “modal”. Inside this div, you can place anything you like. I went with another simple heading and paragraph setup.

With that, we’re all finished with our HTML. If we open up our page in a browser, there’s really not much to see. However, all of the key elements that we need are in place and ready to be styled.

Now that we have our HTML finished, let’s jump over to our CSS and start making this thing look a little better. The first thing that I’m going to do is toss in a repeating wooden background image to make our page a little more attractive.

As you can see, this image comes courtesy of SubtlePatterns. Next, we’re going to style our container. First, start off with some margin, padding, and sizing, then proceed with the text.

As you can see, we used CSS shorthand to declare the font styling for our heading and paragraph. This is a succinct way to declare your weight, size, line-height and font-family. Notice that my line-height is set to 1.5 with no unit type specified. This is a great little trick that allows you to declare your line-height as a ratio to font-size.

Now that we’ve styled our generic page content, it’s time to attack the label and checkbox. The first step here is to style the label so that it looks more like a button and less like a simple piece of text.

If we change the label to a block-level element, we can declare a height, width and background color, which helps us achieve the button look that we’re going for. Also notice that I setup a hover style to change the color and cursor so that it behaves more like a link.

With our label looking the way we want, we can now ditch the actual checkbox. To do this, simply change the position to absolute and push it off the canvas.

With this code, our page is looking pretty awesome. Here’s a peek:

The static page content is marked up and styled. Our next task is to make the last chunk of HTML actually look like a modal box. We do this with a pretty hefty chunk of CSS. Let’s take a look at it and then I’ll walk you through it.

There’s a lot going on here, so let’s break it up. The first goal was to center the box on the page. This is pretty tricky given that we’re using the full viewport and therefore don’t know the dimensions of our parent. By using absolute positioning, auto margins and reset positioning values though, we effectively automatically center our item on the screen.

Notice that I also set the z-index to a negative value. This is because the modal window, even when hidden, can block other items on the page. You won’t see it, but it could potentially prevent a click or hover, thus we toss it to the bottom of the stack.

The rest of the code is visual flair. We gave it the works: a slightly transparent background, box-shadow, transition and rounded corners. Notice that I have the opacity set to 0 by default. This is because we only want the modal window to pop up when we click the button.

We have our box styled, but don’t forget the type inside. We’ll use styles similar to but slightly different than the other text on the page. Remember to style both the h2 and the paragraph.

The modal box is looking good now, but you would never know because it’s hidden. Let’s make it so that it appears when the label/button is clicked.

Here we targeted the input with the “toggle” class and a checked sate, then looked for an adjacent sibling with a class of “modal”. Next, we bring the opacity and z-index of the modal window up to one so that it becomes fully visible.

Our modal box is nearly finished! Everything is working properly and styled up nicely. However, I noticed that things don’t quite look right when the viewport size is reduced. A tiny bit of adaptive styling here goes a long way, so let’s put in the effort.

As you can see, I simply set up a single media query at 767px and reduced the size of a few things: the dimensions of the box, the h2 and the paragraph. Now the modal box has two different states that make it look great on small or large screens.

With that, we’re all finished! To test out the page for yourself, visit the demo below.

Demo: Click here to launch.

There you have it, a pure CSS modal window that adapts to small and large screen sizes. As always, there are some semantic concerns when he hijack a checkbox for something like this, but I didn’t feel like this was a job for :target, so this seemed like the way to go.

Leave a comment below and let me know what you think. What would you change? How would you make it better?