Accessible Modal [Snippet] <> No-Code Supply Co.
Accessible Modal
<!-- Example HTML structure of button and modal -->
<a modal="button" class="button cc-primary">Open Modal</a>
<div class="modal-wrapper" role="dialog" aria-modal="true" aria-labelledby="Popup Modal">
<div class="modal-container">
<div class="p-2">
<h3>This is a modal</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="#" class="button cc-primary">Button</a>
<a href="#" class="modal-close_btn">
<span class="sr-only">Close Modal</span>
<span aria-hidden="true">×</span>
</a>
</div>
</div>
<div tabindex="-1" aria-hidden="true" class="modal-close_area"></div>
</div>
$(function() {
var findDialog = function (elem) {
var tabbable = elem.find('select, input, textarea, button, a').filter(':visible');
var firstTabbable = tabbable.first();
var lastTabbable = tabbable.last();
/*set focus on first input*/
firstTabbable.focus();
/*redirect last tab to first input*/
lastTabbable.on('keydown', function (e) {
if ((e.which === 9 && !e.shiftKey)) {
e.preventDefault();
firstTabbable.focus();
}
});
/*redirect first shift+tab to last input*/
firstTabbable.on('keydown', function (e) {
if ((e.which === 9 && e.shiftKey)) {
e.preventDefault();
lastTabbable.focus();
}
});
/* allow escape key to close insiders div */
elem.on('keyup', function (e) {
if (e.keyCode === 27) {
document.querySelector('.modal-close_btn').click();
};
});
};
$('[modal=button]').click(function (e) {
e.preventDefault();
$(this).next().show();
findDialog($(this).next());
});
$('.modal-close_btn, .modal-close_area').click(function (e) {
e.preventDefault();
$('.modal-wrapper').hide();
});
});

Javascript from the Webflow Accessibility checklist.When keyboard users tabs into modals (like a popup or dialog), focus should remain in that window. This helps prevent users from accidentally moving focus outside the modal without closing it. Users should be able to use the ESC key to close the modal.

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
3.4.21

Similar items

Funsize

9.11.24

Monolith Studio

9.11.24

Current

9.11.24

Billie Tuitt

9.10.24

Arcanium

9.10.24
Featured
Preview

Osmo

View item

Relocate now

9.9.24

Rally

9.6.24

CURB

9.5.24

Lumen Orbit

9.4.24

The Arena

9.4.24

Blaze

9.4.24

Aspect

9.4.24

SupaDupa

8.30.24

Edgar Allan

8.30.24

Liv Hunt

8.28.24

MindPalace

8.28.24

OMMO

8.28.24

Um & Bau

8.28.24

AYVAN

8.28.24

Frame

8.28.24

Light/Dark Switch Library

8.28.24

Makeswift

8.24.24

MotionNumber for Framer Motion

8.24.24

BuildShip Webflow App

8.24.24

MetaDeck

8.24.24
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.