How to make focus on a modal field on a web page

Question

TL DR;

Is there a way to get focus be inside a modal window on a web page?

Here's the problem: I have a classic webpage containing text, links, and forms. When I click on one specific link on the page, a modal rectangle appears (something similar to fancybox or jQuery.ui.dialog ). This modal also contains links and form elements. If the user uses his "tab" key, he can focus every element on the page, elements inside the modal, as well as elements that are outside it. I would like to make the accent say inside the modal window, but I cannot find a way to do this. I would like to do this in CSS or JavaScript, if possible.

I know this is possible because jQuery.ui.dialog can do this using the modal parameter, here is an example http://jsfiddle.net/pomeh/QjLJk/1/show/ . I tried to look at the source code, but I do not understand how this works. Here is the code I found in jQuery UI source code that sounds like a solution to this problem:

 this.document.bind( "focusin.dialog", function( event ) { if ( !that._allowInteraction( event ) ) { event.preventDefault(); $(".ui-dialog:visible:last .ui-dialog-content") .data( widgetFullName )._focusTabbable(); } }); _allowInteraction: function( event ) { if ( $( event.target ).closest(".ui-dialog").length ) { return true; } // TODO: Remove hack when datepicker implements // the .ui-front logic (#8989) return !!$( event.target ).closest(".ui-datepicker").length; }, _focusTabbable: function() { // Set focus to the first match: // 1. First element inside the dialog matching [autofocus] // 2. Tabbable element inside the content element // 3. Tabbable element inside the buttonpane // 4. The close button // 5. The dialog itself var hasFocus = this.element.find("[autofocus]"); if ( !hasFocus.length ) { hasFocus = this.element.find(":tabbable"); } if ( !hasFocus.length ) { hasFocus = this.uiDialogButtonPane.find(":tabbable"); } if ( !hasFocus.length ) { hasFocus = this.uiDialogTitlebarClose.filter(":tabbable"); } if ( !hasFocus.length ) { hasFocus = this.uiDialog; } hasFocus.eq( 0 ).focus(); } keydown: function( event ) { if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && event.keyCode === $.ui.keyCode.ESCAPE ) { event.preventDefault(); this.close( event ); return; } // prevent tabbing out of dialogs if ( event.keyCode !== $.ui.keyCode.TAB ) { return; } var tabbables = this.uiDialog.find(":tabbable"), first = tabbables.filter(":first"), last = tabbables.filter(":last"); if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) { first.focus( 1 ); event.preventDefault(); } else if ( ( event.target === first[0] || event.target === this.uiDialog[0] ) && event.shiftKey ) { last.focus( 1 ); event.preventDefault(); } } 

Answer 1

I will not go into the encoding, since you already have the code, I will explain to you the logic of this.

If your page has the following elements,

element0 (tabindex 1) → element1 (tabindex 2) → element2 (tabindex 3)

To prevent focus, you basically create a loop.

When the tab key is pressed on element 0, it jumps to element 1, as usual.

But when the tab key is pressed on element2, you need to prevent the default behavior of the browser (by the .preventDefault () event). We go to the element with a higher tabindex and give focus to the element.

The same methods when shift + tab is pressed on element0, you need to prevent the default browser behavior (event.preventDefault ()) and manually select focus for element2.

Thus, you create a cycle in which the focus never goes outside.