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

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

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

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

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

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

赞 (0)

相关推荐

  • Bootstrap Modal对话框如何在关闭时触发事件

    Bootstrap Modal对话框如何在关闭时触发事件

    下表列出了模态框中要用到事件.这些事件可在函数中当钩子使用. 实例 下面的实例演示了事件的用法: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件事件</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script

  • Bootstrap每天必学之模态框（Modal）插件

    Bootstrap每天必学之模态框（Modal）插件

    本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l

  • 整理关于Bootstrap模态弹出框的慕课笔记

    整理关于Bootstrap模态弹出框的慕课笔记

    整理自慕课笔记 插件的源文件:modal.js. 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.如下图所示: <body> <button class="btn btn-primary" type="button">点击我</button> <div cl

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • 如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

    如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

    本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很实用! 由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值. 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解,代码

  • Bootstrap Modal遮罩弹出层(完整版)

    之前发表过一篇文章叫Bootstrap Modal弹窗代码,其实那个只是一个弹出层代码而已,并不是仿造Bootstrap的,Bootstrap modal是给外层添加固定fixed,然后内容使用自适应靠上居中方式.今天分享的这篇文章正是这种方式. html结构 考虑到内容区域需要居中对齐,所以至少要有一个div来定位和显示背景,再用一个div居中内容,内容区域想分成header.body和footer. <div class="rs-dialog" id="myModa

  • BootStrap modal模态弹窗使用小结

    模态弹窗 触发元素基本结构: 复制代码 代码如下: <button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button> 内容元素基本结构: <div class="modal fade" id="modal"> <div class="modal-d

  • Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心. 解决方案如下所示: 1.在css里,找到 .mo

  • Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b

  • Bootstrap modal使用及点击外部不消失的解决方法

    本文实例为大家分享了Bootstrap modal使用及点击外部不消失的解决方法,供大家参考,具体内容如下 1.代码: <input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/&g

随机推荐