Closing bootstrap modal using ESC

Question

I am using 2 modals, 1st one contains a form and 2nd shows up when an error occurs in the form. 2nd modal contains only text with error message.

My problem is that when 2nd modal show up and I press Esc, the first one (with the form) will close instead on the 2nd one.

Is there any way how to focus the 2nd modal when it shows up?

This is how it looks like, now if I pressed Esc, the 1st one would close, but I want to close the 2nd one first.

UPDATE

Once I click somewhere on the 2nd modal, it works perfectly. I just need to select/focus it automatically

Answer 1

It looks like this is an issue with how the keyup event is being bound.

You can add the "tabindex"attribute to your modal to get around this issue:

 tabindex="-1"

So your full code should look like this:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
<div class='modal-body'>
<div>Test</div>
</div>

For more info you can view the discussion on this issue on github: https://github.com/twitter/bootstrap/issues/4663