Modal

Modals are simple to setup, but have a required template to work with the Modal Class provided in Blank.

Background

Old version of Blank included a Modal that was setup to work with only one modal on the page and would update the content dynamically. Since then it has been updated to allow multiple, making it easier to make modals.

Check you are using the new Modal before following this guide.

• Open src/assets/js/components/Modal.js
• Ensure the constructor accepts an element

class Modal {
  constructor(element) {
    ...
  }
}

If you're using an older Modal, you should considering upgrading, but make sure you check that existing Modal implementations are migrated. For example Gallery, just check WP Blank.

Quick start

Make a new modal template, but keep all of the base classnames. You can add your own, but it's important to keep the base styles for consistency.

Note: It's best to keep it in it's own template file.

Template

<?php
if (!defined('ABSPATH')) {
    exit;
} // Exit if accessed directly
?>
<div class="modal" id="custom-modal">
    <div class="container container--wide modal__container">
        <div class="modal__box">
            <div class="modal__inner">
              <!-- Put your content in here -->
            </div>
        </div>
    </div>
    <button type="button" class="modal__close"></button>
    <div class="modal__shadow"></div>
</div>

Note: Only use ids if you are sure there is only one per page.

Javascript

import Modal from './components/Modal';

// Setup the Modal by passing in the element
const customModal = new Modal(document.getElementById('custom-modal'));

// Add the button as a trigger to open the modal.
// You can have as many triggers as you like
customModal.addTrigger(document.getElementById('open-trigger'));

Advanced

Opening

A 'trigger' is something that opens the model, in most cases it a DOM element, but there are other cases where you need to open a modal based on another action.

// Some example triggers, only for the example.
// In most cases you would already have a trigger
<button type="button" id="open-trigger">Open Modal</button>
<button type="button" class="multiple-open-triggers-">Open Modal</button>
<button type="button" class="multiple-open-triggers-">Open Modal</button>

To add your own triggers, use the Modal.addTrigger method.

addTrigger(element: string | Node, (event: Event, trigger: Node) => void)

You can add as many triggers as you want, passing either a string selector or Node reference.

import Modal from './components/Modal';

// Setup the Modal by passing in the element
const customModal = new Modal(document.getElementById('custom-modal'));

// Add the button as a trigger to open the modal.
// You can have as many triggers as you like
customModal.addTrigger(document.getElementById('open-trigger'));
// Also accepts a query selector
customModal.addTrigger('.multiple-open-triggers');
// Add a click callback
customModal.addTrigger('.multiple-open-triggers', (event, trigger) => {
  event.preventDefault();
  // You can use the trigger node
  trigger.classList.add('active');
});

If you need to open the Modal programatically, use Modal.openModal.

Example

import Modal from './components/Modal';

const customModal = new Modal(document.getElementById('custom-modal'));
const customOpenButton = document.getElementById('open-button');

customOpenButton.addEventListener('click', customModal.closeModal);

Closing

Closing the modal is handled internally via:

• pressing ESC key
• clicking the shadow
• clicking the close button

If you need to close the Modal programatically, use Modal.closeModal.

Example

import Modal from './components/Modal';

const customModal = new Modal(document.getElementById('custom-modal'));
const customCloseButton = document.getElementById('close-button');

customCloseButton.addEventListener('click', customModal.closeModal);

Methods

Modal.onOpen

Called aftet the modal is opened.

Example

import Modal from './components/Modal';
const customModal = new Modal(document.getElementById('custom-modal'));

customModal.onOpen = () => {
  // Your modal has opened, do anything you like
};

Modal.onClose

Called after the modal is closed.

Example

import Modal from './components/Modal';
const customModal = new Modal(document.getElementById('custom-modal'));

customModal.onClose = () => {
  // Your modal has closed, do anything you like
};

Modal.setContent

Set the content (inner html) of the modal.

Example

import Modal from './components/Modal';
const customModal = new Modal(document.getElementById('custom-modal'));

customModal.setContent('<b>Hello World!</b>');

Modal.clearContent

Clear the content of the modal.

Example

import Modal from './components/Modal';
const customModal = new Modal(document.getElementById('custom-modal'));

customModal.clearContent();