Close modals with Esc key

[JesperF]

When you click on the images on this page a modal opens with a larger preview of the image. It works fine.

I would like to be able to use the ESC key to close these modals. I have followed this guide:

Close modals and off-canvas elements with Esc key

An option to also close modals and off-canvas elements with the Esc key.

But it is not working … any ideas?

[JvP]

Yeah, a native option for this would be great. Maybe they’ll consider adding it in.

[JesperF]

Yes, but until then a custom JS (that works) would also be fine. @JvP did you manage to get the custom JS from this post to work?

[tristup]

Hi @JesperF,

The code in the reference thread works properly. On the other hand, I will check with our development team on this and will add this as a feature request for future consideration.

Thanks

[JvP]

Yes it still works here.

[JvP]

Thanks for adding a feature request for it

[JesperF]

@tristup But I have used the code from this post and it is not working. Can you see what I’m doing wrong?

[JvP]

@alexander

Then inspect the modal then add data-x-esc-close (with no value) as a custom attribute on the modal.

Did you add this as well?

[JesperF]

Yes:

The modal is a Component … perhaps that complicates things. But let´s see what Themeco support says.

But thanks

[charlie]

The Frontend API has changed since that post. See the below for an updated version. We’re also just going to add this feature to our main codebase in Pro 6.4. Have a great weekend!

window.csGlobal.rivet.attach('[data-x-esc-close]', function(el) {
  var id = el.getAttribute('data-x-toggleable')
  window.addEventListener('keyup', function(e) {
    if (e.key === 'Escape' && window.xToggleGetState(id)) {
      window.xToggleUpdate(id, false)
    }
  }, { passive: true })
});

[JvP]

Fantastic, thanks and you have a great weekend too!

[ruenel]

You are most welcome.

[JesperF]

@charlie Thanks for the updated js code. I’ve added it as Global JS code on our site, but the ESC key is still not working

But it’s good to hear that a native ESC key solution will be added to the main codebase in Pro 6.4.

I guess I’ll just have to wait for this

Thanks again

[ruenel]

No problem, @JesperF.