Restricting tab navigation to overlays(pop-ups)

About : We all have complex pages with several overlays that appear based on selections from several drop down menus and by on-click functionalitys,

Our goal is to limit the user to only be able to tab through the elements on the overlay (above positioned lightbox div) via the keyboard.

In other words,eventually we have to remove the below lying page elements from the tab sequence.

we can do this by settings tabindex="-1" attributes on all of the below lying elements using javascript or jQuery, which does work, but it is lengthy process and also it has many drawbacks.

So let us find simple and universal solution for this problem.

Let us take simple overlays structure like this.

    <div>

    <input type="text" id="firstItemInSequence" />

    <input type="text" id="secondItemInSequence" />

    <input type="text" id="thirdItemInSequence" />

    <button id="clsButton">close</button>

</div>

Now in this example ,we need to restrict tab functionality between #clsbutton and #firstItemInSequence .

For this we can write simple function like this.

    function tabFocusRestrictor(lastItem,firstItem){

$(lastItem).blur(function(){

    $(firstItem).focus();

     });

here we can use this function in this example as :

  tabFocusRestrictor('#clsButton','#firstItemInSequence');

conclusion : simpley we can call this function in tab navigation function by using that overlays id or class , where we need to restrict tab navigation.