How can I focus the trigger modal button after closing the modality in bootstrap

Question

I cannot blur the button after closing the modality.

$('#exampleModal').on('hidden.bs.modal', function(e){ $('button').blur(); }); 

I tried above and it still doesn't seem to blur it. I have tried almost everything. The only solution is to set the timeout and blur it after the model completes the hidden transition. Any better solution?

Answer 1

The focus on the trigger element is set in the modal plugin using the .one() binding, which, unfortunately, cannot be unbound. The good news is that we can do this:

 $('#myModal').on('shown.bs.modal', function(e){ $('#myModaltrigger').one('focus', function(e){$(this).blur();}); }); 

Where #myModaltrigger is the identifier of the modal launch button. The reason for using .one() bindings is that the blur function will only be called after the modality is displayed. After it hides and focus / blur occurs, the button can be focused normally, for example, by tabbing to it, without automatic blur.

See this working example.

Answer 2

In fact, @cvrebert is here that it negatively affects accessibility.

blur () resets focus, so keyboard users (both viewers with the keyboard and more critical users tweet) will effectively return to the very top of the page.

try http://jsbin.com/sukevefepo/1/ just using the keyboard: TAB to the button, activate it with ENTER / SPACE, then TAB to the close button, ENTER / SPACE. now, after closing the modality, TAB ... and you see that your focus is again included in the first link. for everything except the simplest pages, this is most annoying and can be very disorienting for users of on-screen firmware).

in short: Bootstrap's current behavior is correct. I understand the desire to neutralize the focused appearance of the modal trigger when the modal itself is closed ... but using blur () is not the answer (unless you care about users with the / AT keyboard, that is).

a more robust approach that I plan to explore for a future version of Bootstrap is to dynamically set the class on the body after the user first navigates using TAB / SHIFT + TAB (specifying the keyboard user) and suppression: focus styles for these situations otherwise.

Answer 3

My solution that works with multiple modules on a page (based on Bootstrap modulation examples ):

 $('.modal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); // Button that triggered the modal button.one('focus', function (event) { $(this).blur(); }); });