解决select2在bootstrap的modal中默认不显示的问题
在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中默认不显示的问题的更多相关文章
- 在BootStrap的modal中使用Select2搜索框无法输入
用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...
- 在BootStrap的modal中使用Select2
bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; bootstrap4 $.fn.modal.C ...
- bootstrap --- 在 modal中的 datetimepicker 关闭 ,会造成 modal也会被关闭.
这个大概是事件冒泡造成的. 解决办法: <form id="userForm" class="form-horizontal"> <input ...
- BootStrap 的modal 中使用typeahead
刚开始怎么也不现实,在页面上显示正常. 调试发现是下拉框被modal遮挡住了, 找到样式dropdown-menu 修改z-index值为2000后,显示正常.(modal的z-index值为1 ...
- 解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)
前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方co ...
- yum源中默认好像是没有mysql的。为了解决这个问题,我们要先下载mysql的repo源。
CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 $ wget http://repo.mysql.com ...
- AndroidStudio中默认不导入org.apache.http等包的解决方法
参考:http://www.cnblogs.com/xiadongqing/p/5942459.html Eclipse ADT中默认引入了org.apache.http包,而AndroidStudi ...
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...
- select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题
select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法: 把页面中的 tabindex="-1" 删掉, 或者值改为1 代码片 ...
随机推荐
- Robot Framework 安装步骤
1. 安装python 2.7.11, 并添加环境变量到PATH.在cmd验证python是否安装成功. 2. 解压pip-8.1.1.tar.gz,执行python setup.py insta ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
- [Java] JSP笔记 - 自定义标签
自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...
- vim vi Ubuntu
在vi编辑模式下按退格键不能删除内容,按方向键不能上下左右移动?如果是则:1. 在vi里非编辑模式下按冒号进入到末行命令模式,然后输入set nocompatible,回车,然后在进入vi编辑模式,看 ...
- JavaScript中事件和属性有什么区别吗?或者说事件与方法有什么区别?
https://zhidao.baidu.com/question/1691946187489353788.html
- Entity framewok 如何实现多条记录作为一条取出, for xml path如何实现
http://www.myexception.cn/linq/1288046.html Entity framewok 怎么实现多条记录作为一条取出, for xml path怎么实现News表:ID ...
- Spring 的动态数据源实现
1. 配置多个数据源 这里以两个c3p0数据库连接池的数据源作为实例.在Spring框架下使用c3p0的数据库需要加入c3p0-0.9.1.2.jar(现在最新的)这个支持包.这里以数据同步项目为例: ...
- JavaWeb基础学习体系与学习思路
对于JAVAWEB的学习,首先一定要明确的是学习整体框架和思路,要有一个把控.对于WEB,很多人认为是做网页,简单的把静态网页与JAVAWEB与网页设计一概而论. 拿起一本JS就开始无脑的学习,学了一 ...
- 模板化的七种排序算法,适用于T* vector<T>以及list<T>
最近在写一些数据结构以及算法相关的代码,比如常用排序算法以及具有启发能力的智能算法.为了能够让写下的代码下次还能够被复用,直接将代码编写成类模板成员函数的方式,之所以没有将这种方式改成更方便的函数模板 ...
- The current identity (NT AUTHORITY/NETWORK SERVICE)
IIS错误提示: The current identity (NT AUTHORITY/NETWORK SERVICE) does not have write access to 'C:/WINDO ...