Backdrop

A curtain, or semi-transparent screen that appears behind modal elements such as Dialogs, Dropdowns, and Menus.

Example

Code sample

1
2
3
4
5
<body data-controller="toggle-menu" data-menu-open="#main_menu">
  <template data-toggle-menu-target="triggerTemplate">
    <a href="#main_menu" data-action="toggle-menu#close" id="backdrop">Close</a>
  </template>
</body>

Usage notes

Designed to work with the site’s main menu in the Site header strap, which includes (Menu button, Close link)
Relies on progressively-enhancing script to create this and invoke this element.
Thie element is only shown if a data-menu-open attribute has been added to the <body> element.
This element will hide away again if the data-menu-open attribute has been removed
When the menu is open, a keydown event handler will monitor for Esc keys.
Any clicks on this element will also cause the menu to close, and the backdrop to disappear.

Source files