解决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 代码片 ...
随机推荐
- nodejs URL解析
说到URL就需要提一下URI,一个网址就是一个URL,是一个具体的符号,说明了要通过什么协议来访问某种资源,URI是一个字符格式规范,URL是URI的一个子集,URL肯定是URI,但URI却不一定是U ...
- 蒙特卡洛模拟入门的几个小例子(R语言实现)
嗯,第一个例子是怎么用蒙特卡洛模拟求pi的值:第二个是用蒙特卡洛模拟求解定积分:第三个是用蒙特卡洛模拟证券市场求解其收益:第四个是用蒙特卡洛模拟验证OLS的参数的无偏性:然后还要R是如何求导,计算导数 ...
- 【转】MySQL性能优化的最佳21条经验
文章转自: http://blog.csdn.net/waferleo/article/details/7179009 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关 ...
- XP安装IIS来加载aspx页面(Web调用SAP数据)
1,安装IIS 在XP中安装IIS方法很简单,安装时需要提供安装光盘来加载I386文件,可以使用虚拟光驱或光盘.在此做个简单说明(控制面板-添加/删除 Windows组件-勾选Internet信息服务 ...
- 集群CLUSTER种类介绍
一.集群CLUSTER 介绍 计算机集群Cluster,可以把多台计算机 连接在一起使用,平分资源或互为保障.其好处不言而喻,群集中的每个计算机被称为一个节点,节点可添加可减少,在这些节点之上虚拟出一 ...
- 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法
这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ...
- UVA 1401 Remember the Word
字典树优化DP Remember the Word Time Limit: 3000MS Memory Limit: Unknown ...
- App制作
公司官网生成app: 搜狐快站 http://zhan.sohu.com/
- Android handler的使用简单示例
Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMes ...
- Autoit中用PrintWindow替代ScreenCapture函数实现截图
想截取躲在后面的窗体或控件,找到了PrintWindow函数,幸运的是Autoit3也对此进行了封装以方便使用. 于是乎,将帮助文件里的_WinAPI_PrintWindow()实例改写了一下,以替代 ...