Search code examples
javascriptjquerytwitter-bootstrap

Closing bootstrap modal using ESC

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?

enter image description here

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

Solution

  • 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