CSS-Only Modal with GenerateBlocks

After posting about making a simple tooltip in GenerateBlocks, I guess my new quest is to figure out how to do everything I need (that’s not currently in GenerateBlocks) manually, on my …

Kyle Van Deusen

Published:

Filed Under:

Tools

css only modal 02
This content contains affiliate links. View our affiliate disclaimer.

After posting about making a simple tooltip in GenerateBlocks, I guess my new quest is to figure out how to do everything I need (that's not currently in GenerateBlocks) manually, on my own.

It may be a drawback for my tool of choice to not have everything I need already baked in — but I'm trying to take this as an opportunity to level-up my game.

Today's mission: build a system for pop-up modals without (a) adding a plugin, and (b) fiddling with JavaScript.

And thanks to a tutorial from the one and only Kevin Powell, I think I've cracked the code (get it?).

An animated GIF of the CSS-Only modal from this tutorial
CSS-Only Modal in Action

With that pun out of the way, let's get started!

CSS for the Modal

This entire modal system is powered by CSS — so the bulk of the work will be done shortly after you copy and paste the code below into your child theme or customizer.

This code has been taken directly from Kevin's tutorial and slightly modified to suit our need with GenerateBlocks (where a lot of the styling can be controlled in the GUI).

/* CSS-Only Modal */

.modal-backdrop {
        display: flex;
	z-index: 100;
        align-items: center;
        justify-content: center;
 	opacity: 0; 
        transition: opacity 150ms ease-in-out;
        padding: 2em;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        width: 100vw;
        height: 100vh;
        pointer-events: none;
}

.modal-backdrop:target {
        opacity: 1;
	pointer-events: auto;
}

.modal-content {
  position: relative;
	margin-left: auto;
	margin-right: auto;
}

.close {
	position: absolute; 
	top: 0;
	right: 0;
	transform: rotate(45deg);
}

What's nifty about this solution is that it's just using an anchor (like a jump link) and the :target pseudo class to make this all work.

If you don't immediately see what the code is doing from just looking at it, don't worry — it will start to become clearer as we make our way through the tutorial.

You may want to tweak the styling I've put together for this tutorial, and that's fine — all of it is pretty straight-forward. But for now, just copy and paste that CSS into your child theme or into the Additional CSS section of your theme's customizer as-is so we don't add to the complexity and increase the chances of something breaking.

Building the Trigger

In order for the modal to work, we'll need some sort of link to trigger it — in most cases, likely a button, but any ol' link will do.

Open up the editor on the page you want to add the modal to, and start by adding a new Container block.

With that container selected, go to the “Advanced” tab, and under HTML Anchor, type in modal-trigger-section.

Screenshot from the Advanced tab and HTML Anchor
Adding the Anchor

You can place anything you'd like in this section — the web is your oyster — but one thing you will have to include is a link.

In our case, we'll use a button.

Inside the section, add a GenerateBlocks Buttons block, style it as you wish, and then add the link #modal.

Screenshot of button as instructed by tutorial
Button Setup

This is the button that will trigger your pop-up modal shortly.

Building Your Modal Window

Next we're going to build out the section that will show inside our pop-op modal.

Start by adding a new container to your page. Technically it can go anywhere on the page, but it might be handy to place this container just below the container from the previous step so you know what it belongs to.

With your new container selected, under the “Advanced” tab, add the HTML Anchor modal. Under the Additional CSS class(es) add the class modal-backdrop.

This section will serve as the backdrop around your modal. We're going to control the styling of this with the CSS, so no need to make any more tweaks to this container.

But we will need to add a container inside of the modal container. The nested container will be the actual modal — so go ahead and add the second container inside the first, which should appear like the image below when looking at the list view of your page.

Screenshot of the list view of the page with a container nested inside a container
Container within a container

It's up to you, but most of the time we don't want the actual window to take up a large portion of the screen, so I would suggest changing the outer container's “Container Width” to something like 680px for a good starting place.

Finally, you'll need to add a new class to this inner-container. Select it, and under the Advanced tab in the field for Addtional CSS class(es), add the class modal-content.

You're welcome to style this container however you'd like from right inside the GenerateBlocks controls — giving it a background color, adding some padding, and perhaps even a drop shadow.

And we're nearly done — just a few more elements and your CSS-only modal will be poppin'!

Next, we'll need a button that will allow the user to close the modal. Unfortunately, in this CSS-only solution, clicking the backdrop or pressing the escape key won't work (one of the only, but legitimate drawbacks to this solution).

Inside your inner container, add a GenerateBlocks Button block.

You can style this as you wish, but if you'd like to keep a simple “close icon” look, then add the “Plus” icon to the button (available in the “Icon” tab under “General”) and click the “Remove Text” toggle (all of these options are under the “Icon” tab when you have your button selected).

button icon
Button icons

Note: I used the “plus” icon and am rotating it 45 degrees (to make it an “X”) with the CSS from earlier in this tutorial. If you choose another icon, you'll want to remove the transformation from the CSS I provided you.

I chose a background color the same as my modal background (white), with a light gray text and a darker gray on hover — but you're welcome to do as you see fit.

Finally, give your button the class of close, and link the button to #modal-trigger-section.

Screenshot of adding the close class
Close class added to close button
Screenshot of adding the link
Link added to close button

Lastly you can finish designing your modal by adding any content or styling you'd like.

To keep it simple for the tutorial, I added a heading and some taco ipsum text.

Here's what mine looks like from the back end:

Screenshot of the modal I designed from the back-end editor
My super-fancy modal design

Save your work, and if you followed along — your modal should be working! You'll have to view it from the front end to find out… So, head on over and give it a shot!

A Few Limitations

As I mentioned earlier, one of the big limitations to this CSS-only solution is the fact that you can't click the backdrop (as we're all probably used to) or press the escape key to close the modal — the user has to press the close button.

For me, that's not a total deal-breaker — but it is worth being aware of.

Another drawback is that you can sometimes end up with a slight “jump” (up or down the page) when you close the modal. This is due to the way the modal works, using the “jump links” to open and close the modal. When you close the modal, you are essentially “jumping” back to the section your trigger button is in (which is why you added the ID of modal-trigger-section and linked to it from the close button).

Again, not a dealbreaker, and adding the ID to the trigger section minimizes the effect to nothing more than a slight jump at most.

It was also pointed out that this solution might not be the most accessibility friendly, as it doesn't prevent users from being able to tab through content behind the modal and doesn't instantly assign focus inside the modal.

Finally, if you're needing multiple popups on a page — things are going to get a little more tricky. In theory this should work fine, but you'll need to come up with a stronger naming convention that will tie a button to the appropriate popup, and the close buttons to their respective sections.

Can You Make a Modal with GenerateBlocks? Yes!

With just a few classes, a couple ID's, and a pinch of CSS — you can make a functional pop-up modal with nothing more than GenerateBlocks.

Animated gif of the CSS modal we created in this tutorial.
Our CSS-Only Modal in Action

It may not have all the bells and whistles you need, but for something simple (like an opt-in form), it will do the trick.

And one of the big benefits to this being done in blocks is that you can copy and paste the two sections we created (the trigger section and the modal section) anywhere else you'd like — including over to other sites — so you should only have to set this up once.

I hope you enjoy this simple, lightweight solution — and a big thanks to Kevin Powell for the inspiration and initial code! If you're not subscribed to Kevin's channel, I suggest you do it immediately!

Share this article!

Kyle Van Deusen

The Admin Bar

Born in California and raised in Texas, Kyle is a husband and proud father of three. After spending 15 years as a graphic designer and earning a business degree, he launched OGAL Web Design in 2017, The Admin Bar community with Matt Sebert in 2018, and Docket WP with Andre Gagnon in 2020.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

September 16th, 2022

Kevin Powell Talks WordPress!

What we can learn from a master front end developer

August 19th, 2022

Optimizing Live with Perfmatters

Get a behind-the-scenes look at how Brian uses Perfmatters on live websites!

July 8th, 2022

New TAB Site Teardown

How any why I rebuilt The Admin Bar website with GenerateBlocks (Featuring Dave Foy)

More Articles

discovery

6 Ways A Good Discovery Process Can Benefit Your Business

Is your discovery process not delivering the results you want? Ben from Uprise Digital is here with his advice on how to create a more valuable discovery phase.

5 Block Editor Secrets (1)

The Block Editor: 5 Things You Might Not Know

5 ways to improve your workflow, eliminate plugins, and make block-building more enjoyable!

business-2022-05-04-00-33-49-utc

How To Fight Back Against Marketing Budget Cuts

During times of economic downturn and instability, how do you fight back against budget cuts?