The Admin Bar

CSS-Only Modal with GenerateBlocks

Dec 27, 2021

By: Kyle Van Deusen

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode

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!

tab headshot ml
Kyle Van Deusen
@kylevandeusen

Kyle is the co-host of The Admin Bar, the owner of a agency of one called OGAL Web Design and the co-founder of Docket WP. You’ll likely find him trolling The Admin Bar community.

Enjoy this? Become an Official Barfly!

More from The Bulletin Board

Product

The Website Owner's Manual: A Complete Walkthrough

Everything you could possibly want to know about The Website Owner's Manual
Kyle Van Deusen
Jan 07, 2022
Processes

5 Tips to Improve Your Block Building Experience

5 ways to improve your experience using Generate Blocks and the default block editor.
Kyle Van Deusen
Jan 07, 2022
Content Marketing

How To Create A Content Strategy

With clients slowly going quiet over the holidays and with the new year fast approaching, you’re probably thinking about your...
Abby Wood
Dec 27, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
• Live
Outbound Monthly Recurring Revenue
crossmenu