SHARE
TWEET

Untitled




Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
- // Add a ":focusable" pseudo-class
- jQuery.expr[':'].focusable = function (elem, i, argument) {
- return jQuery(elem).is('a, button, :input, [tabindex]');
- };
- jQuery(document).ready(function () {
- // To improve accessibility, trap focus within a Bootstrap modal dialog
- // when it's open, and release it when the modal closes.
- // Add a handler to the Boostrap 3 "show" event. When the dialog opens,
- // the focus is set to the dialog's first focusable element. This should
- // typically be the close button in the upper right corner.
- // To trap focus within the dialog, we also attach a handler to the
- // "focusin" event at document level. When focus moves to any control
- // outside the dialog, we move it back to the focus point.
- // A handler on the Bootstrap "hide" event removes the "focusin" handler
- // when the dialog closes.
- //
- // We attach the handler to the body element with a .modal selector to
- // handle dynamically created dialogs (via Knockout or similar).
- jQuery("body").on("show.bs.modal", ".modal", function (e) {
- // Save reference to the dialog element
- var dialog = e.target;
- // Get the first focusable element in the dialog, and focus there.
- var focuspoint = $(":focusable", dialog).get(0);
- focuspoint.focus();
- // If focus moves to a control outside the dialog, move it back.
- jQuery(document).on("bootstrap-accessibility.focusin", function (e) {
- if (!(jQuery.contains(dialog, e.target))) {
- // Move focus back to dialog. That will cause this handler to fire again, but that's OK.
- focuspoint.focus();
- }
- });
- });
- // Stop focus trapping when dialog is closed
- jQuery("body").on("hide.bs.modal", ".modal", function (e) {
- jQuery(document).off("bootstrap-accessibility.focusin");
- });
- });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.