Untitled

// 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");
    });
});