An accessible modal window! — https://launchy.io
For more details on the accessibility of modal windows:
Launchy! is very easy to install and use:
Wherever you want to have a Launchy! control + window appear in your HTML content, simply wrap your content with a
<div> and add the
This content will appear in the modal window.
data-launchy-- Attribute is required but the value can be anything
data-launchy-text-- This is the text that will be output to the launcher control
data-launchy-title-- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
data-launchy-button-- If you'd rather have
buttonelements instead of the default
aelements as launcher and close controls
You can add your own custom close controls to any Launchy! modal window!
This content will appear in the modal window.Ok!
Clicking on the "Ok!" link will hide the modal window and send focus back to the launcher control!
You can add your own custom "refocus" controls to any Launchy! modal window!
data-launchy-refocusattribute to the
idof the element you wish to send focus to
This content will appear in the modal window.Send me to the article headline!<!-- Somewhere else in your page… -->My perfect sundae…
Clicking on the "Send me to the article headline!" link will hide the modal window and shift keyboard focus to the
<h1 id="post-title"/> element!
Launchy! has many CSS classes available on its generated elements for custom styles. Check out the style.scss file for class names and an example on how you might want to style your modal windows!
For any site, grab the
/dist/launchy.js file and include it at the bottom of your HTML page/template:
Launchy! will run automatically and generate all the modal windows for you!
Launchy! is also available as an npm package!
npm i launchy-modal-window
launchy.js directly in your app or site template.
See the CONTRIBUTING file.
See the LICENSE file.