Open Modal


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.


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>

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>

This is the modal content and it has a link in it

This is more modal content and it also has a open modal two in it

This is more modal content and it has a custom close button in it.

This is more modal content and it also has a link in it

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">
  <button class="modal_close" aria-label="Close Modal Window"></button>

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.

The modal has several events:


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