#132 - Masquer des éléments avec la touche Escape

Ajoutez un attribut et lorsque vous cliquez sur la touche esc, l'élément sera affiché en mode "none".

Accessibility Modals

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

15 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT 💙 - HIDE ELEMENTS WITH ESC KEY -->
<script>
  document.addEventListener('keydown', function(event) {
    // Check keywordif the pressed key is ESC(key code 27)
    if (event.key === 'Escape' || event.keyCode === 27) {
      // Find all elements with the attribute ms-code-close-esc
      const elements = document.querySelectorAll('[ms-code-close-esc]');

      // Loop through the elements and set their display to string'none'
      elements.forEach(function(element) {
        element.style.display = 'none';
      });
    }
  });
</script>