在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题。代码解决如下:

<style>
/*select2在Bootstrap的modal中默认被遮盖,现在强制显示在最前*/
.select2-drop {
z-index: 10050 !important;
} .select2-search-choice-close {
margin-top: 0 !important;
right: 2px !important;
min-height: 10px;
} .select2-search-choice-close:before {
color: black !important;
}
/*防止select2不会自动失去焦点*/
.select2-container {
z-index: 16000 !important;
} .select2-drop-mask {
z-index: 15990 !important;
} .select2-drop-active {
z-index: 15995 !important;
}

  因为modal可能是后生成的,所以绑定select2事件时,应该先指定其父元素:

    $(function(){
$("#PaymentId").select2({
placeholder: "--请选择--",
dropdownParent: $("#myModal"),
allowClear: true
});
});

  在弹出modal里面是单选select2的时候,我遇到过无法输入的问题,这个时候,只需要把Modal上的tabindex属性删除就行了,(remove tabindex="-1" from modal)

解决select2在bootstrap的modal中默认不显示的问题的更多相关文章

  1. 在BootStrap的modal中使用Select2搜索框无法输入

    用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...

  2. 在BootStrap的modal中使用Select2

      bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; bootstrap4 $.fn.modal.C ...

  3. bootstrap --- 在 modal中的 datetimepicker 关闭 ,会造成 modal也会被关闭.

    这个大概是事件冒泡造成的. 解决办法: <form id="userForm" class="form-horizontal"> <input ...

  4. BootStrap 的modal 中使用typeahead

    刚开始怎么也不现实,在页面上显示正常. 调试发现是下拉框被modal遮挡住了, 找到样式dropdown-menu    修改z-index值为2000后,显示正常.(modal的z-index值为1 ...

  5. 解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)

    前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方co ...

  6. yum源中默认好像是没有mysql的。为了解决这个问题,我们要先下载mysql的repo源。

    CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 $ wget http://repo.mysql.com ...

  7. AndroidStudio中默认不导入org.apache.http等包的解决方法

    参考:http://www.cnblogs.com/xiadongqing/p/5942459.html Eclipse ADT中默认引入了org.apache.http包,而AndroidStudi ...

  8. 利用bootstrap的modal组件自定义alert,confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  9. select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题

      select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法: 把页面中的 tabindex="-1" 删掉, 或者值改为1 代码片 ...

随机推荐

  1. 【原创】JEECMS v6~v7任意文件上传漏洞(2)

    文章作者:rebeyond 受影响版本:v6~v7 漏洞说明: JEECMS是国内Java版开源网站内容管理系统(java cms.jsp cms)的简称.该系统基于java技术开发,继承其强大.稳定 ...

  2. 无法对 索引 'IndexName' 执行 删除,因为它不存在,或者您没有所需的权限。

    先写结论: 语法:  DROP INDEX 表名.索引名 如果索引明明存在..却报标题上那个错..请直接去看是否是表名与库中的不一样.. 请一定去检查一下..别问我为什么这么说.. if exists ...

  3. hibernate学习四(关系映射一对一与组件映射)

    一.关系映射简介 在数据库中,表与表的关系,仅有外键.但使用hibernate后,为面向对象的编程,对象与对象的关系多样化:如 一对一,一对多,多对多,并具有单向和双向之分. 开始练习前,复制上一次项 ...

  4. leetcode算法分类

    利用堆栈:http://oj.leetcode.com/problems/evaluate-reverse-polish-notation/http://oj.leetcode.com/problem ...

  5. NOSDK--一键打包的实现(五)

    1.5 mac下的脚本环境配置及脚本的使用 脚本环境主要依赖sdk,ndk和ant,前两个可以在android官方网站下载(被墙了的话只能FQ了). android-sdk-macosx androi ...

  6. MySql简易配置

    选择standard configuration ,然后next Service Name :服务名字 Launch the MySQL Server automatically:是否开机启动mysq ...

  7. Qt 5.0+ 中 connect 新语法与重载函数不兼容问题的解决方法,以及个人看法

    Qt 5.0+ 版本提供了 connect 的新语法,相比之前的语法新语法可以提供编译期检查,使用也更方便.可是使用过程中发现一个小问题——当某个 signal 和成员函数是重载关系的时候,qmake ...

  8. Toad各版本所包含的组件

    Toad for Oracle Base Edition Toad for Oracle Knowledge Xpert for PL/SQL Knowledge Xpert for Oracle A ...

  9. centos6 安装mysql报错Requires: libc.so.6(GLIBC_2.14)

    是应为版本弄混了,不可以把el7的mysql装到el6系统上,重新下载centos6对应的版本的,这里是centos6选择el6版本的 wget http://dev.mysql.com/get/my ...

  10. 安装centos6.5如何选择安装包

    (1)系统安装类型选择及自定义额外包组 进入如图2-28所示界面.上半部分是系统定制的不同的系统安装类型选择项,默认是"Desktop",这里我们选择"Minimal&q ...