这两天在 Coursera 上学习 Bootstrap
第四周的作业是把非 JavaScript 实现的 Modal 改成用 JavaScript 实现(https://www.coursera.org/learn/web-frameworks/peer/jAXUU/assignment-4-detailed-instructions-and-submission)
按照 http://getbootstrap.com/javascript/#modals-methods 找到了解决方案:
|
作业是解决了,但是发现一个小问题:不管我怎么改keyboard属性,都不能用esc关闭modal
搜了一下得知:在modal所在div中加入tabindex="-1"属性即可
那么问题又来了…这个tabindex="-1"是什么鬼…
搜索加测试了一下之后终于搞清楚了tabindex用来帮助键盘党使用tab键定位网页元素,按其值由小到大跳转,默认是 0
如果值相等,则按先后顺序跳转
在未加入tabindex="-1"时,modal和主页中所有元素值都是 0
当前键盘的焦点仍然在主页而非modal上,相当于在主页按esc,modal监听不到所以无任何反应
加入tabindex="-1"后,modal的优先级最高,键盘焦点到了modal上,这时再按esc就能正确触发关闭modal事件了