bootstrap模态框和select2合用时input无法获取焦点

在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.

解决方法:

1.

把页面中的  tabindex="-1"  删掉:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
<div class="modal-body" style="max-height: 800px">
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
<div class="modal-body" style="max-height: 800px">

2.

重写enforceFocus方法:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};
时间: 2024-11-05 21:47:47

bootstrap模态框和select2合用时input无法获取焦点的相关文章

bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. 解决方法:去除模态框中的"tabindex"属性. <div class="modal fade" tabindex="-1" role="dialog" id="myModal" data-backdr

Bootstrap 模态框、轮播 结合使用

Bootstrap 模态框和轮播分开使用的教程网上很多.但是两者结合使用的例子和资料很少.两者结合使用时,开始我遇到了不少bug,现在分享给大家. 我的这个例子是把图片轮播嵌入到模态框里. 最后的效果如下图:点击页面上按钮,弹出模态框,模态框里的图片开始轮播,点击旁边空白位置,模态框消失. 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 轮播.模态框</title> <link

Bootstrap模态框按钮

1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框(Modal) --

Bootstrap 模态框(也可以说的弹出层)

最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html页面的写法如下: <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <script src="bootstrap/js/j

去除BOOTSTRAP模态框半透明阴影

当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上这样一句代码: <div class="modal-backdrop  in"></div> 案例:自带半透明阴影的模态框 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta char

关于手动关闭BootStrap模态框

在网上找手动关闭BootStrap模态框的解决方法,说是(需要引用bootstrap.js等): $("#myModal").modal('hide'); 但是我发现我的只能关闭 , 不能关闭下面那半透明层.找了下发现是出现这两行代码的缘故. <div class="modal-backdrop fade in"></div> <div class="modal-backdrop fade in"></d

bootstrap模态框远程加载网页的正确处理方式

bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a> 使用脚本模式: $("#modal").modal({ remote: "tieniu.php" }); 没有给出任何实例,这种用

使用bootstrap模态框实现浮动层

authour: 陈博益 updatetime: 2015-04-22 06:52:15 friendly link: http://v3.bootcss.com/javascript/#modals 目录: 1,bootstrap模态框的使用示例 2,注意点 1,下面是一个简单的例子说明bootstrap模态框的使用: 1 <!DOCTYPE html> //modal.html 2 <html xmlns="http://www.w3.org/1999/xhtml"

第二百四十三节,Bootstrap模态框插件

Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素: 1分别为 modal(模态声明层). 2dialog(窗口声明层). 3content(内容层). 在内容层里面,还有三层: 1分别为 header(头 部). 2body(主体). 3footer(注脚). modal样式class类,写在声明模态框<div