在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. Swift中的可选链与内存管理(干货系列)

    干货之前:补充一下可选链(optional chain) class A { var p: B? } class B { var p: C? } class C { func cm() -> S ...

  2. Python题目

    https://github.com/taizilongxu/interview_python 1 Python的函数参数传递 strings, tuples, 和numbers是不可更改的对象,而l ...

  3. 第一章 Part 1/2 Git 一览

    虽然这个系列的文章主要关注的是Github,然而首先了解下Git的基本概念和名词也是非常有帮助的. 工作目录(Working Directory) 工作目录是你个人计算机上的一个目录.在该目录下,每一 ...

  4. 解决Myeclipse PermGen space问题

    myeclipse配置web服务器配置 Window—Preferences—Myeclipse—Servers—tomcat JDK的Optional Java VM arguments配置为:-X ...

  5. 了解了下spring boot,说一下看法

    这段时间比较忙,新项目的事比较多,跟着老大忙前忙后,没准备写博客. 下班地铁上看视频,发现spring boot的公开课,看完后,就准备抒抒情怀: 1.从个人的角度来看,使用spring boot可能 ...

  6. 博客整理——K米测评

    K米测评 1.233郑扬涛(orzyt) 博客链接:个人作业--关于K米的产品案例分析 亮点分析: 1.将整个软件各个功能模块的逻辑图都画出来了,而不是只画一个大概. 我做了个缩略图 2.第三部分 建 ...

  7. html页面读取PDF小案例

    html页面 引用<script src="js/pdfobject.js" type="text/javascript" charset="u ...

  8. 深入理解jsonp跨域请求原理

    在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中 ...

  9. Android压缩图片到100K以下并保持不失真的高效方法

    前言:目前一般手机的相机都能达到800万像素,像我的Galaxy Nexus才500万像素,拍摄的照片也有1.5M左右.这么大的照片上传到服务器,不仅浪费流量,同时还浪费时间. 在开发Android企 ...

  10. mysql中的行转列

    //查看当前商品库存 function checkProductStock($product_id){ global $wpdb; $sql="SELECT post_id,max(if(( ...