Adding Modal Dialogs using HTML

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. There are ideal for showing notices and pop-up content such as social share, post details or a contact form.

If you are creating a custom function for your site and you want to take advantage of the theme’s built-in modal dialog support you’ve come to the right place – we’ll show 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:

This is a sample modal window. Very cool huh?

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>

This is a sample modal window. Very cool huh?

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 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" aria-label="Close modal">✗</button>
        </div>
        <div class="wpex-modal__body wpex-p-20 wpex-last-mb-0">
            <p>This is my Popup</p>
        </div>
    </div>
</dialog>

Hello There!

This is a sample modal window. Very cool huh?

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.

  • Last updated on
Back To Top