Tab index with bootstrap pop up modal menu

Question

I have an html page how can i specify tab index for bootstrap popup modal and main differently .

If popup is open table index should be available for popup modal only. But when i click on last element of popup modal tab transfer control to main page.

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

when i press tab on last a it should transfer focus to first element instead of transferring to main page 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>

Check if event raised by last a is tab then set focus to first element

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

                }
            }
     </script>

Answer 2

if you mean when you press tab from the last element and the modal closes, then try adding these inside the modal parameters.

( make sure your modal contains a close button, otherwise you will not be able to close the modal as the modal will not close on a input from the "esc" button or a click outside the modal body.)

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

but if you want to close the modal by clicking out of the modal then use only

data-keyboard="false"