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 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?).

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.

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.

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.

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).

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.

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:

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.

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!