Modal

Intro

Modals are the end-game boss in terms of components. One aspect that isn't thought about much is how accessible your modal is—can a keyboard-only user navigate it, is there a focus trap, did you use the proper aria attributes to notify screen readers where they are, did you program the "esc" key to close the window, etc.? I'm not going to pretend that this accomplishes everything, but I feel it comes close. You can look at the source code or play with it here to see if it meets your needs. You may find that all you need is the <dialog> element, which is 100% supported across browsers and fully accessible.

In terms of application, you should also consider whether or not the content you want to put in the modal makes sense. If this content is a critical component of the page or is the main call-to-action, you'll want to avoid using modals entirely. The page should be self-sufficient without the modal or its content if you want your page to be effective from a user experience perspective.

Basics

The <ap-modal> element allows you to use a pre-styled modal for whatever content it is that you're looking to keep out of the main layout of the page. It is composed primarily of two slots: modal-button (which needs to be a <button> if it wasn't obvious), and a modal-content wrapper/container. You can place just about anything inside the modal-content, and it will include a close button in the top right corner.

Copy
html
<ap-modal>
    <button slot="modal-button">Click Me</button>
    <div slot="modal-content">
        <h2>Lorem ipsum</h2>
        <p>
            Dolor sit amet consectetur adipisicing elit. Corrupti necessitatibus
            consectetur tenetur deleniti, libero perspiciatis possimus,
            molestiae numquam quos deserunt doloribus facilis. Sapiente magnam
            voluptate a aperiam hic labore dolores.
        </p>
    </div>
</ap-modal>
Expand

Video/No Bezels

If you have an embedded video and want to remove the bezels/padding of the window, add a .no-bezels class to the <ap-modal> element. This will also remove the "Close" button, but the "ESC" key and clicking outside of the window will still exit the modal.

Note: if the video is a Vimeo video, opening the modal will automatically start playing the video. If the user closes the window, the video will pause, resuming when the user re-opens the window. When the video is finished, the window will close automatically.

Copy
html
<ap-modal class="no-bezels">
    <button slot="modal-button" class="button-link">Click Me</button>
    <div slot="modal-content">
        <div style="position: relative; padding-top: 56.25%">
            <iframe
                style="
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                "
                width="560"
                height="315"
                src="https://www.youtube.com/embed/dQw4w9WgXcQ"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
            ></iframe>
        </div>
    </div>
</ap-modal>
Expand

Advanced

Need to fire off a function when the modal opens or closes? Just assign the function to the onOpen or onClose field of APModal instance you need.

Copy
javascript
const modal = document.querySelector("ap-modal");
modal.onOpen = () => console.log("Modal opened");
modal.onClose = () => console.log("Modal closed");
Expand