bootstrap: Modal Close On Escape keyboard = true Does Not Work
The JavaScript modal according to the doc should close when escape is pressed by default:
keyboard boolean true Closes the modal when escape key is pressed
Even setting keyboard = true still does not close the modal when escape key is pressed.
About this issue
- Original URL
- State: closed
- Created 12 years ago
- Comments: 32 (4 by maintainers)
Commits related to this issue
- Enable escape key for the Bootstrap modal See http://stackoverflow.com/questions/12630156/how-do-you-enable-the-escape-key-close-functionality-in-a-twitter-bootstrap-moda See https://github.com/twbs/... — committed to tkrotoff/jquery-simplecolorpicker by tkrotoff 11 years ago
- Resolves CLIMATE-25. Fixes modal close with escape when lacking focus. - Adding "tabindex='-1'" to the modal's primary div tag fixes the issue. Additional information can be found at [1] [1] https... — committed to apache/climate by deleted user 11 years ago
- fix modal键盘事件不能触发的bug ref: https://github.com/twbs/bootstrap/issues/4663 add tabindex=-1 — committed to hustKiwi/muui by hustKiwi 10 years ago
- Add tab index attribute to appease bootstrap escape button behavior :-\ https://github.com/twbs/bootstrap/issues/4663#issuecomment-8374486 — committed to th3james/BellHopper by th3james 10 years ago
Not sure, @fat may be able to offer a better explanation. My guess would be for performance or interference with other keyup events on the page.
A nice feature might be to automatically add tabindex=“-1” if keyboard=true in the Modal class because right now this would be broken for anyone upgrading to 2.1.
Make sure tabindex is set on the modal: http://jsfiddle.net/DCUYy/
This seems to be a breaking change in 2.1 as previously the keyup event was bound to the document but now is bound to the actual modal element. Hence, the the tabindex attribute is now required.
Word, I like the idea of adding
tabindex="-1"automagically with JS.@Yohn, that also works as mentioned by @jschr earlier. Adding
tabindex="-1"to every modal div is more work than adding just one line to bootstrap.js I just implemented @jschr’s idea about automagically adding tabindex attribute to modal div…Hey @nodesocket,
Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:
For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.
thanks!