Bootable Modal Menu Tab Index

Question

I have an html page, how can I specify the tab index for the bootstrap and main popup popup in different ways.

If a popup is open, the index should be available only for popups. But when I click on the last control to transfer tabs of pop-ups to the main page.

 <a href="#">first element</a>
 .
 .
 ...
<a href="#" >last element in popup</a>

when I click the last tab, it should shift the focus to the first element, and not shift to the main content

Answer 1

add id to select in dom

 <a href="#" id="first">first element</a>
 .
 .
 ...
<a href="#" id="last" >last element in popup</a>

, , , ,

  <script type="text/javascript">
            document.getElementById('last').onkeydown = function(e){
                if (e.keyCode == 9) {
                    document.getElementById('first').focus();

                }
            }
     </script>

Answer 2

, , , .

(, , , "esc" .)

data-backdrop="static" data-keyboard="false"

, ,

data-keyboard="false"

Answer 3

-

$('#myModal').keydown(function(e){
 if($('#last').is(":focus") && (e.which || e.keyCode) == 9){
e.preventDefault();
$('#first').focus();
  }

});

Answer 4

- :

private tabKey(event: KeyboardEvent) {
        let parentModal = $(document).find('.modal');
        //List of html elements which can be focused by tabbing.
        let focusableElementsArrayString = 'a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"]';
        let focusableElementsInModal = parentModal.find(focusableElementsArrayString);
        let numberOfElements = focusableElementsInModal.length;
        let firstTabElement = focusableElementsInModal[0];
        let lastTabElement = focusableElementsInModal[numberOfElements - 1];
        // Check for Shift + Tab
        if (event.keyCode === 9 && event.shiftKey) {
            if (document.activeElement === firstTabElement) {
                event.preventDefault();
                lastTabElement.focus();
            } // Check for Tab
        } else if (event.keyCode === 9) {
            if (document.activeElement === lastTabElement) {
                event.preventDefault();
                firstTabElement.focus();
            }
        }
    }