解决bootstrap中modal遇到Esc键无法关闭页面_javascript技巧

bootstrap为我们提供了很多方便的页面控件,modal就是其中之一。很多人在使用modal时遇到了esc键按下无法关闭的问题,即使显式传入keyboard选项也不生效。

$('#editFormItemModal').modal({show:true, keyboard:true});

此问题在2.1以后版本出现,要解决这个问题也很简单,modal所在div添加一个tabindex属性即可:

<div class="fade modal" tabindex="-1">

问题很简单,修复起来也很简单,希望对大家能够有所帮助。

时间: 2024-09-19 15:13:30

解决bootstrap中modal遇到Esc键无法关闭页面_javascript技巧的相关文章

解决bootstrap中modal遇到Esc键无法关闭页面

 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.不过在使用的过程中,我们还是会遇到各种小问题,今天我们探讨的就是个人在使用中遇到的一个小BUG的修复.     bootstrap为我们提供了很多方便的页面控件,modal就是其中之一.很多人在使用modal时遇到了esc键按下无法关闭的问题,即使显式传入keyboard选项也不生效. $('#editFormIte

BootStrap中Datetimepicker和uploadify插件应用实例小结_javascript技巧

bootstrap-datetimepicker是一款轻便的时间选择插件,支持Time选择,国际化,应用起来相当简单.而uploadify则是一款支持多文件上传的插件.最近应用这两个插件做了些小应用,感觉不错,简单做个总结. 1.引入插件注意事项 到 bootstrap-datetimepicker 官网下载,应用bootstrap-datetimepicker需要用到三个文件:bootstrap-datetimepicker.min.js,bootstrap-datetimepicker.mi

Bootstrap中定制LESS-颜色及导航条(推荐)_javascript技巧

 主题色 在variables.less文件的开始,可以看到灰色及品牌色的默认变量及其值 @gray-darker: lighten(#000,13.5%); //#222 @gray-dark 我们可以直接进行替换,以涵盖我们所需的完整灰度空间 @gray-darker: #222; @gray-dark: #454545; @gray: #777; @gray-light: #aeaeae; @gray-lighter: #ccc @gray-lightest: #ededed @offwh

快速解决js中window.location.href不工作的问题_javascript技巧

E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script type = "text/javascript" > function jump () { window . location . href = 'http://www.jb51.net' ; } function enjoy () { return false ; } < /script> html代码: <a href= "java

全面解析Bootstrap中tab(选项卡)的使用方法_javascript技巧

本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下源码文件: tab.js 实现原理:1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析:1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件  1.1.Hiden.bs.tab:隐藏上一个元素   1.2.Show.bs.tab:显示当前元素   1.3.Hideen.bs

JavaScript实现按Ctrl键打开新页面_javascript技巧

(译者注: 本文解决的是按 Ctrl键时使用JS打开新页面的问题) 在简化的HTML5规范中,允许在 A 标签内包含多个 DIV 和/或其他块级元素. 现在只要用 <a> 标签包住块元素,就能搞定原来需要用JavaScript来监听并调用 window.location 实现页面跳转(redirect)功能. 但使用<a>标签的这种包装形式也有不好使的情况 -- 例如,某个块元素(block)内还有一些 <a> 标签, 这种情况下我们只想在点击parent中<a&

解决微信浏览器Javascript无法使用window.location.reload()刷新页面_javascript技巧

场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信浏览器中reoad后请求的一直是第一次打开页面时请求的数据.可以理解为请求被缓存了,但没有实测,也不知道是否是缓存. 解决方法是,使用window.location.href="window.location.href+随机数" 代替 window.location.reload().切记

兼容性-bootstrap中modal在IE9下的兼容问题

问题描述 bootstrap中modal在IE9下的兼容问题 在IE9下,点击按钮弹出modal弹出框,当按钮设置为失效状态时,如何设置modal使之不再弹出弹框? 解决方案 disabled? 这个应该是兼容的,你的按钮是button吗,还是其他element?

php判断数组中是否存在指定键(key)的方法_php技巧

本文实例讲述了php判断数组中是否存在指定键(key)的方法.分享给大家供大家参考.具体分析如下: php中有两个函数用来判断数组中是否包含指定的键,分别是array_key_exists和isset array_key_exists语法如下 array_key_exists($key, $array) 如果键存在返回true isset函数语法如下 isset($array[$key]) 如果键存在返回true 演示代码如下: <?php $array = array("Zero&quo