How to Create Modal Popups

The Total theme includes built-in javascript for the modern dialog element. In fact, it’s used for a few features such as the Social Sharing element (when set to Modal) and the Post Cards when the link type is set to modal.

The dialog element is a core browser element that allows for creating popups with minimal code that are accessible and user-friendly. They are ideal for showing notices and pop-up content such as social share, post details or a contact form.

There are two ways to create modals in Total: using a Modal Template (no code required) or writing the dialog HTML yourself. We’ll cover both!

Modal Templates (Recommended)

In Total 6.6 we added the Modal template type to Dynamic Templates. This is the easiest way to create modal popups because you design the content with your page builder and the theme takes care of the dialog markup, title and close button for you.

Creating a Modal Template

1. Go to Theme Panel > Dynamic Templates and click Add New.
2. Select “Modal” as the “Template Type”.
3. Design your modal content using WPBakery or Elementor.
4. Configure the modal settings and save your template.

Available modal settings:

• Title Display – Show or hide the modal header.
• Title Text – The text displayed in the modal header.
• Width (px) – By default, the modal expands to fit its content. Set a width to keep all modals the same size.
• Border Radius – Default, Medium, Large, x Large or None.

Opening a Modal Template

Modal Templates can be opened from the following theme elements:

• Button, Icon Box, Feature Box and Teaser – Set the onclick option to “Open Modal Template” and select your template.
• Post Cards and Term Cards – Set the Link Type to a modal option, then select your template under “Custom Modal Template” in the Link tab.
• Custom Cards – Select your template in the “Modal Template” setting when editing your card.

The theme automatically gives each modal a unique ID, so you can use the same template multiple times on a page without conflicts.

For a complete example, have a look at the guide for creating a modal popup contact form.

Creating Modals with Custom HTML

If you are creating a custom function, shortcode or custom card template and you want to take advantage of the theme’s built-in modal dialog support, you can write the dialog HTML yourself. The rest of this guide shows you how!

Create a Simple Dialog Window

You can create a simple HTML dialog window using the following HTML:

<dialog id="popup-1" class="wpex-modal">
    <div class="wpex-modal__inner">This is my Popup</div>
</dialog>

If you add this code to your site you won’t actually see anything because dialog elements are hidden by default. So you will need to add a button or link to trigger your popup.

Here is an example of a trigger button:

<button aria-controls="popup-1" class="wpex-open-modal theme-button">Popup</button>

You can use a standard button or a link, the important things are that you add the wpex-open-modal classname and that your aria-controls attribute matches the ID of your modal dialog.

Click the button below to view a sample modal in action:

Basic Modal

Adding a Close Button

By default dialog windows close when clicking outside them, but Total has built-in code to support close buttons. To add a close button simply insert any element (link or button) with the classname wpex-close-modal inside the dialog.

<dialog id="popup-2" class="wpex-modal">
    <div class="wpex-modal__inner wpex-p-25 wpex-text-center">
        <p>This is my Popup</p>
        <button class="wpex-close-modal theme-button">Close</button>
    </div>
</dialog>

Modal with Close Button

This example uses a standard button at the bottom of the dialog, but of course you can style the button however you want. See the example below where we add a “heading” to the modal with a close button to the side.

Adding a Modal Title and Close Icon

Your modal popup will display any HTML you add inside the dialog element so adding a heading and close can be done easily using Total’s CSS utility classes.

<dialog id="popup-3" class="wpex-modal wpex-modal--custom-width wpex-shadow-lg wpex-rounded wpex-p-0" style="width:600px;">
    <div class="wpex-modal__inner">
        <div class="wpex-modal__header wpex-flex wpex-items-center wpex-gap-20 wpex-p-20 wpex-border-b wpex-border-solid wpex-border-main">
            <div class="wpex-modal__title wpex-heading wpex-text-xl">Hello There!</div>
            <button class="wpex-modal__close wpex-close-modal wpex-unstyled-button wpex-flex wpex-items-center wpex-justify-center wpex-ml-auto wpex-text-lg" aria-label="Close modal"><span class="wpex-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></span></button>
        </div>
        <div class="wpex-modal__body wpex-p-20 wpex-last-mb-0">
            <p>This is my Popup</p>
        </div>
    </div>
</dialog>

Modal with Title

In this example I’ve also added an inline width of 600px to the dialog element. By default the dialog will expand to fit whatever content is inside it, but you can give it a default width if you’d like either using an inline style tag like I did or targeting the unique ID with custom CSS.

Modal Width

By default, the modal automatically adjusts its size to fit its content, with a maximum width defined as clamp(0px, 95%, var(--wpex-modal-width, 900px)).

If you’d like to set a minimum width, the simplest approach is to add an inline style attribute specifying a fixed width. If you look at the previous example you’ll see a width of 600px added to modal.

Example:

<dialog id="sample-modal-id" class="wpex-modal wpex-modal--custom-width" style="width:600px;">

When adding a custom width, it’s recommended that you add the wpex-modal--custom-width modifier class. This will remove the theme’s custom max-width on the modal so it uses the browser’s native max-width.

Adding a Modal to a Custom Card

The easiest way to open a modal from a custom card is to select a template in the card’s Modal Template setting (see Modal Templates above). If you’d rather add the modal HTML directly to your card, keep reading.

When adding modal HTML to your custom cards, you need to ensure every modal has a unique ID. Otherwise, whenever you click on the button that opens the modal it will open the modal found on the first card.

Setting up unique ID’s for your modals:

The easiest way to create unique ID’s for your modals so that each card has its own unique modal is to use the theme’s {{post_id}} dynamic variable. For example, you may give the modal an id of card-modal-{{post_id}}. This way each modal ID will be appended with the current post ID and thus be unique.

Example HTML for your custom card that opens a modal with the post content:

<p><button aria-controls="my-custom-card-modal-{{post_id}}" class="wpex-open-modal theme-button">View Details</button></p>
<dialog id="my-custom-card-modal-{{post_id}}" class="wpex-modal wpex-modal--custom-width wpex-shadow-lg wpex-rounded wpex-p-0" style="width:600px;">
    <div class="wpex-modal__inner">
        <div class="wpex-modal__body wpex-p-20 wpex-last-mb-0">{{post_content}}</div>
    </div>
</dialog>

Notice how we are also using the {{post_content}} variable to render the content for the current card post inside the modal.