bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转
bootStrap模态框与select2合用时input不能获取焦点
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.
- 把页面中的 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">
- 重写enforceFocus方法:(测试可用)

保证他能被执行到就行
模态框内部滑动
不使用页面的滚动条
css:给模态框设置overflow-y: hidden;即为取消掉页面滚动条的使用
#HelpModal{margin-top: 95px;height: 300px;overflow-y: hidden;}

添加滚动条,添加滚动条的位置不同效果不同
.modal-content {overflow: auto;max-height:300px;}

html:模态框最外层设置id属性的overflow-y: hidden;,权重值高于自定义的.modal-open .modal类名设置的overflow-y: auto;
select选中跳转
select2选中事件
$(".demo").on("select2:select",function(e){
console.log(e);
})
**跳转到本页面中指定位置 **
document.getElementById(‘uuuu’).scrollIntoView()
官网select2事件介绍

bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转的更多相关文章
- bootstrap模态框和select2合用时input无法获取焦点
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1&qu ...
- bootstrap模态框和select2合用时input无法获取焦点(转)
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1&qu ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- Bootstrap入门(二十三)JS插件1:模态框
Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...
- bootstrap3中select2的默认值和下拉框的禁用
最近做项目用到了select2插件,需求中需要给下拉框设置默认值之后,禁用下拉框,我开始的写法是这样的 <script type="text/javascript"> ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- Bootstrap入门(三十)JS插件7:警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- html中如何修改选中 用input做的搜索框 的边框颜色
html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解 ...
- input标签(单选框和复选框)
单选框: <form> <input type="radio" name="..." value="..." checke ...
随机推荐
- js中 typeof 和 instanceof 的区别
typeof 和 instanceof 都能判断数据类型,但是它们之间有什么区别呢,浅谈如下 typeof 用于判断数据类型,返回值为以下6种类型 1.string 2.boolean 3.numbe ...
- 【经典结构】单例模式Singleton
单例模式Singleton 1.含义 单例模式:即一个类只能创建一个实例. 只有一个实例 --> 不可以从类外new对象 --> 构造器私有化private --> 从类里创建实例: ...
- Python+pytest知识点回顾
pip install pytest pytest 单元测试框架 pytest高于unittest测试框架 unittest测试类需要继承unittest.TestCase类 pytest不需要继承, ...
- 微信小程序云开发-云存储的应用-识别行驶证
一.准备工作 1.创建云函数identify 2.云函数identify中index.js代码 1 // 云函数入口文件 2 const cloud = require('wx-server-sdk' ...
- dos命令的学习
打开CMD的方式 开始+系统+命令提示符 Windows+R+输入CMD 在任意的文件夹下面,按住shift+点击鼠标右键,在此处打开命令行窗口 资源管理器的地址栏前面加上CMD路径 管理员方式运行: ...
- GC垃圾回收机制详解
JVM堆相关知识 为什么先说JVM堆? JVM的堆是Java对象的活动空间,程序中的类的对象从中分配空间,其存储着正在运行着的应用程序用到的所有对象.这些对象的建立方式就是那些new一类的操作 ...
- javascript学习--(四)面向对象:
一.生成器generator: javascript里的generator函数是用function*定义的, 案例:yield 也会返回 function* foo(x){ yield x+1; yi ...
- python读取数据写入excel的四种操作
Python对Excel的读写主要有:xlrd.xlwt.xlutils.openpyxl.xlsxwriter几种 xlutils结合xlrd: 操作的是以xls后缀的excel,读取文件保留原格式 ...
- 看视频学SignalR—在微软虚拟学院学习SignalR
SignalR把实时Web功能变得异常简单. 如果您希望在几个小时内对SignalR有一个直观的了解,观看微软虚拟学院(MVA)的视频教学Lighting Up Real-Time Web Commu ...
- YGC问题排查
在高并发下, Java程序的GC问题属于很典型的一类问题,带来的影响往往会被进一步放大. 不管是 「GC频率过快」还是「GC耗时太长」,由于GC期间都存在Stop The World问题,因此很容易导 ...