Easy Popup Modal in GenerateBlocks Pro

,
YouTube video

Written By

Jonathan Jernigan

Found at Permaslug and APEX Web Solutions

Learn about my Generate Made Easy course: https://permaslug.com/generate-made-easy/

Video Transcription:

GenerateBlocks is fast improving its suite of elements, but one you’ve likely needed is some sort of modal or popup. 

I went in search of a solution that balances functionality, ease of use, and accessibility and what I came up with is a simple solution that I think will work for most use cases. It’s called Hystmodal. 

In this video, I’m going to show you briefly how to get HystModal working in GenerateBlocks Pro, but as long as your page builder of choice lets you add custom classes and custom attributes, this will work. 

If you’re using Bricks, Oxygen, Cwicly, etc this will work for you. 

Required Code

First, we’re going to add the required code.

In my case, I’m going to use WPCodeBox to add the required JS and CSS. 

So, let’s add the first of our two snippets.

We’ll call it ModalJS and we’ll configure the settings as follows:

  • Scripttype: JavaScript
  • How to render: External
  • Script tag: async
  • Script location: footer
  • Snippet order: 10
  • Where to run: Front-end, or your custom condition

Then, you can just paste in the code.

You’ll find that at the link in the description below.

While you’re there, please consider subscribing to my email list. I occasionally send a summary of recent tutorials, things I find that are interesting and worth sharing, etc. 

Grab that code and paste it into WPCodeBox.

Be sure you save the snippet and turn it on. 

Now, we’re going to create a second snippet. 

This one we’ll call ModalCSS.

For the settings, we’ll choose:

  • Script type: CSS
  • How to render: External
  • Script location: footer
  • Snippet order: 10
  • Where to run: Front-end, or your custom condition

I’ve modified this CSS to work on a GenerateBlocks Pro site, but it’s super simple and easy to read so if you want to customize it further you certainly can do that. 

Again, be sure to save the snippet and turn it on. 

Build The Modal Content

HystModal gives you a sample bit of HTML markup that you can use as a reference, and it’s very simple. Essentially, you have 3 divs. One acts as the background overlay and one acts as the actual modal and it’s content. 

Again at the link in the description, I copied my GenerateBlocks layout there for you to copy and paste into your own GenerateBlocks Pro site. That will just work out of the box.

In my case, I created it as a GeneratePress element so I have more control over where it appears, I can show and hide it conditionality, etc. 

The most important things you need to pay attention to are the following: 

  1. Your parent container needs to be a div and its ID set to “myModal”
    It also needs to have a class called “hystmodal” and a custom attribute set to aria-hidden=true.
    The JS will handle changing the aria label to false and back to true based on the modals current visibility
  2. Your second div needs to have a class called “hystmodal__wrap” and a minimum height of 100vh so your modal is centered on the screen when opened
  3. Your 3 div contains all the modal content but it also needs a few things:
    1. A Class called “hystmodal__window”
    2. role=dialog attribute
    3. aria-modal=true attribute
  4. You need a button or link to trigger the modal
    1. It’s href link can just be set to #
    2. It needs an attribute of data-hystmodal=#myModal where #myModal is the ID you set on the parent container in step 2
  5. Lastly, you need a close button
    1. It needs a class called “hystmodal__close”
    2. And an attribute of “data-hystclose” 

After that, you can add anything you want to the 3rd div for your modal content. Style that div to include shadows, border-radius, etc and it will all appear on the modal when opened.

There are two minor things you might want to adjust in the code snippets we created earlier. 

Firstly, in the CSS snippet we created earlier is the color of the overlay. The classes to look for are called “hystmodal__shadow” and “hystmodal__shadow–show”

You can change the background-color on “hystmodal__shadow” and the opacity value on “hystmodal__shadow–show” to your liking.

Secondly, you might want to change a JS attribute to allow or disallow background scrolling when the modal is open. Look in the JS file for the backscroll: false and change that to true if you desire. 

Do note that you will also have to change your second div’s minimum height as your modal gets bigger, otherwise you’ll end up with two scrollbars. 

That’s it! You now have a totally functional modal that’s easy to customize because it just uses GenerateBlocks elements. 

Be sure to check out my Generate Made Easy course at the link in the description below.

My name is Jonathan and as always, thanks for watching and I’ll see you in a future tutorial. 

Source code credit: https://github.com/AddMoreScripts/hystModal

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I summarize the goings on here on Permaslug, share announcements, and other pertinent information. I hate garbage emails as much as you and promise not to contribute anymore to it.

  • This field is for validation purposes and should be left unchanged.