Demo

Open Modal

About

This modal is built to be easy to use, dependency-free (aside from feature polyfills), and accessible. It can be opened and closed programatically or via links in a page, contains behavior to gracefully support keyboard use (including focus management, focus isolation, and closing via escape key), and is tested for optimal accessibility for assistive technology. It also supports chaining of modals, meaning that if you link to another modal from within a modal, the new modal will cause the prior modal to close when it opens.

Documentation

To make a modal, create a fg-modal element and give it a unique ID. This element and attribute combination will be recognized by this component’s javascript, and allow it to be enhanced with necessary behaviors and accessibility information.

You can place any HTML content inside the element, but one part that’s particularly helpful is a title that labels the modal accessibly, which can either be placed in an HTML element with a class of modal_title (seen below) or in an aria-label attribute on the fg-modal element itself.

<fg-modal id="testmodal">
  <h2 class="modal_title">Modal dialog number one</h2>
  <p>This is the modal content and it has a <a href="#">link</a> in it </p>
  <p>This is more modal content and it also has a <a href="#testmodal2" class="modal_link">open modal two</a> in it </p>
</fg-modal>

By default the modal dialog will be closed. You can create a link that opens the modal by starting with an anchor link that has a class of modal_link and an href that points to the modal’s ID. When the modal is enhanced, it will change the role of the link to a button to match its in-page behavior.

<a href="#testmodal" class="modal_link">Open Modal</a>

The modal web component generates a close button automatically with a class of modal_close. If you would like to create a custom close button for sake of styling or language purposes, include your own in the markup that uses that class and the modal will use that button instead:

<fg-modal id="testmodal" aria-label="Settings dialog">
  <p>content...</p>
  <button class="modal_close" aria-label="Close Modal Window"></button>
</fg-modal>

Including Scripts & Styles

The modal has two dependencies, one for the Javascript and one for the CSS, which you can find in the src directory:

<script type="module" src="src/fg-modal.js"></script>
<script src="demo/es5/fg-modal.js" defer nomodule></script>
<link rel="stylesheet" href="src/fg-modal.css">

Note: to support IE11, we have used Babel to create a module-free version of the modal in the demo directory, which is listed above using the module/nomodule pattern to only delivery to non-module browsers.

Methods and Events

The modal has several methods you can call on it. You can find these methods on the element itself.

• Open: Open the modal: document.getElementById("testmodal").open();
• Close: Close the modal: document.getElementById("testmodal").close();

The modal has several events:

• Init event: When the modal is first created, it receives an init event.
• Open events: When the open method is called, the beforeopen event is triggered on the element, and when the method finishes running, the open event is called.
• Close events: When the open method is called, the beforeopen event is triggered on the element, and when the method finishes running, the open event is called.

Polyfills

To use the modal in modern browsers, two polyfills are likely necessary (please check browser support to see how these align with your needs).

• Inert: The standard inert attribute (support currently includes Chrome and Edge) is used for disabling the rest of the page when the modal is open, which is a required accessiblility feature. Browser support for inert is still improving so WICG’s Inert polyfill is listed as a dependency of this project and can be found in the demo/inert.js file. You can load it in a deferred or async manner as it is not used until the dialog is opened. Example: <script src="./lib/inert.js" defer></script>
• Custom Elements: The fg-modal element uses the standard HTML custom elements feature, which are well supported but need a polyfill in IE11 and older. This project references WebReflection’s Document Register Element polyfill which can be found at demo/lib/document-register-element.js. It should be loaded prior to the accessible modal script. In our demo page we use the following pattern to load it, but you could package it with ```