解决select2在bootstrap modal中不能正常使用的问题

最近用bootstrap做前端框架，遇到select2单选框在bootstrap modal中不能正常使用，输入框不能获取焦点智能过滤；如下图：

解决方法一：在bootstrap.js的模态框js内加上

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

如图：

第二种情况，网上看到的，不是我的体验：

他是说：由于 select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题

解决办法：是把页面中的模态框的属性 tabindex="-1" 删掉, 或者值改为1

如图：

我这样做了，并没有解决，所以然并卵。。。。。。只是写在这里，担心这样也是一种情况而已！

再次说明：我是第一种方法解决的。

以上这篇解决select2在bootstrap modal中不能正常使用的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap Table从服务器加载数据进行显示的实现方法

    Bootstrap Table从服务器加载数据进行显示的实现方法

    Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中.当然,这需要配置一些参数并进行初始化表格才行.其官方网站地址为:http://bootstrap-table.wenzhixin.net.cn/.里面可以下载使用所需的JS和CSS文件,以及参考文档和例子. Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式. 所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出

  • 解决bootstrap-select 动态加载数据不显示的问题

    如下所示: 在使用bootstrap-select 动态加载数据的时候,refresh和render方法是必须使用的,不然就必须使用jquery往li对象里面填充数据,因为在bootstrap-select 中界面显示数据是通过li对象显示的,而select对象只是用于填充数据的,所以不要搞混了 以上这篇解决bootstrap-select 动态加载数据不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • BootStrap selectpicker后台动态绑定数据

    项目使用BootStrap设置select时,不能动态加载,使用以下方法可以解决. //获得全部订单信息(订单ID,订单名称) function GetAllOrders(obj) { $.ajax({ type: 'Get', url: '/OrderTypeSetting/GetAllCanUseOrderTypes/', dataType: "Json", success: function (data) { if (!data.flag) { $.each(data, func

  • bootstrapValidator bootstrap-select验证不可用的解决办法

    如何解决bootStrapValidator bootStrap-select验证不可用,只要三步: 思路:把多选下拉框的选中值,赋给一个隐藏的input组件,再对input组件进行验证(bootstrap-validator默认情况下hidden,disabled的组件不验证,可以通过excluded属性更改),具体步骤如下: 1.表单验证初始化(js) $('#myModalForm').bootstrapValidator({ message: 'This value is not val

  • 解决select2在bootstrap modal中不能正常使用的问题

    最近用bootstrap做前端框架,遇到select2单选框在bootstrap modal中不能正常使用,输入框不能获取焦点智能过滤:如下图: 解决方法一:在bootstrap.js的模态框js内加上 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 如图: 第二种情况,网上看到的,不是我的体验: 他是说:由于 select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法:是

  • 快速解决select2在bootstrap模态框中下拉框隐藏的问题

    修改select2-container--open类 .select2-container--open { z-index: 9999999 !important; } 以上这篇快速解决select2在bootstrap模态框中下拉框隐藏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

    最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法.在CSS中加入以下代码 CSS body { padding-right: 0px !important } .modal-open { overflow-y: auto; } PS:bootstrap datepicker 在bootstrap modal中不显示问题 可以通过在 input 输入框之外 嵌套 <span style="posit

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

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

  • Bootstrap modal只加载一次数据的解决办法(推荐)

    1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>

  • Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

    上篇我提到的'多弹窗之叠加显示不出弹窗问题' 这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩. 这个问题从哪来的,是因为modal叠加,我们点击窗口之外的空白部分,一次性关闭所有model,但是modal自己生成的'.modal-backdrop'只关闭了一个,其余的依然存在, 导致阴影遮罩. 这里的解决办法是 1.第一种禁用modal 点击空白自动关闭的功能. tempModal.modal({ backdrop:"static&

  • 解决JS组件bootstrap table分页实现过程中遇到的问题

    本文为大家分享了bootstrap-table 分页的问题,供大家参考,具体内容如下 问题1 :服务器端取不到form值,querystring没有问题,但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax.   1可以用读流文件解决.2 如果想用request.form 方式,设置  contentType: "application/x-www-form-urlencoded", 如 $('#tableList').bootstrapTable(

  • IE11下CKEditor在Bootstrap Modal中下拉问题的解决

    最近在项目中需要在Bootstrap Modal弹出框中载入CKEditor. 初始化CKEditor以后,在IE11下,格式/字体/颜色的下拉会闪现一下后就消失,但在chrome和firefox下没问题. 主要原因是IE11下,点击CKEditor,触发了focusin.modal事件,原modal enforceFocus函数的if条件成立,bootstrap modal获取焦点,CKEditor下拉失去焦点,所以下拉出现闪现. Google了以后找到了一个解决方案 这个解决方案中,加了判断

  • Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题

    上篇提到的' Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题' 我总结了下,对于modal多窗口叠加引起的遮罩,滚动条,无法弹出窗口的问题,查看源代码,我总结了一种方法可以一次性解决所有这些问题,而不影响原有modal功能,并且实现了多窗口叠加. 对于多窗口,如果我们将第二个,乃至第三个,第四个modal的根节点,移植到body下面,就不会出现了以上问题. 具体该如何操作,请看以下代码: 通常我们遇到多弹窗的问题,是出现在modal套modal中,也就是: <div class='

  • Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案

    最近一直在使用Bootstrap,遇到了很多问题,通过google也明白了很多,学习了很多.针对'Bootstrap modal 多弹窗之叠加显示不出弹窗问题'说一下自己的解决办法. 当然还是官方提出的'最好不要多个modal叠加很容易出现很难解决的前端组件问题' 示例代码: <div class='bs-example-modal-lg fade modal' data='0' id='feature-mapping-dialog-form' style='display:none'> &l

随机推荐