Индекс вкладки с загрузочным всплывающим модальным меню

Question

У меня есть html-страница, как я могу указать индекс вкладок для всплывающего всплывающего окна загрузки по-разному.

Если всплывающее окно открыто, индекс должен быть доступен только для всплывающих окон. Но когда я нажимаю на последний элемент управления переносом вкладок всплывающих окон на главную страницу.

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

, когда я нажимаю вкладку на прослужит он должен передать фокус на первый элемент вместо передачи к содержанию главной страницы

Answer 1

добавить идентификатор, чтобы выбрать в йот

<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(); 
      } 
     } 
    }