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不能获取焦点

模态框内部滑动

select选中跳转

最新文章

热门文章