bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转

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">
  1. 重写enforceFocus方法:(测试可用)
    bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转
    保证他能被执行到就行

模态框内部滑动

不使用页面的滚动条
css:给模态框设置overflow-y: hidden;即为取消掉页面滚动条的使用
#HelpModal{margin-top: 95px;height: 300px;overflow-y: hidden;}
bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转
添加滚动条,添加滚动条的位置不同效果不同
.modal-content {overflow: auto;max-height:300px;}
bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转
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选中跳转

上一篇:C#中页面之间跳转方法比较


下一篇:WPF学习之路(一) 初识WPF