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

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

设置CSS

        .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;
        }

设置下拉

$("#User").select2(
  {dropdownParent: $("#Modal")}
)

原文地址:http://blog.51cto.com/hequan/2323225

时间: 2024-08-09 19:06:55

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

解决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 !import

在bootstrap modal 中加载百度地图的信息窗口失效解决方法

这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事. 前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能. 页面演示地址:http://www.lyytqm.com/Dealerships 点击地址区域在模态窗口中显示百度地图,并在地图中标注点位,显示窗口信息,但信息窗口展示的信息频繁失效,仅显示名称. 更换了各种加载数据方式不能解决,在蹲厕所时想到了原因,即可给出解决方法. 原因是bootstrap modal 以及动画

IE11下,CKEditor在Bootstrap Modal中的下拉问题

原问题解决方案链接:http://ckeditor.com/forums/CKEditor/Editor-Dropdowns-dont-work-in-IE11 最近在项目中需要在Bootstrap Modal弹出框中载入CKEditor. 初始化CKEditor以后,在IE11下,格式/字体/颜色的下拉会闪现一下后就消失,但在chrome和firefox下没问题. Google了以后终于找到解决方法. 以下代码添加了$(e.target.parentNode).hasClass('cke_co

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

用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化select2 dialog.find("select").select2({ formatNoMatches: function() { return "没有选项"; }, placeholder: "请选择...", minimumResultsFo

解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如下: 使用Select2,主要是因为它支持下拉式搜索.所以在数据稍微多一点,作为搜索选择功能的首选.但是运行出来之后,发现搜索框无法点击.开始想到的index不够大,被其他的元素覆盖了.但是跳转z-index也无法解决.在普通的页面,搜索框是ok的. 2.解决办法 通过Google搜索,发现sele

bootstrap modal垂直居中

使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢? 当然网上一些前辈也给出了不少答案, 感觉不太全而且针对的都是各自的项目难以给我等小白太直观的理解.因而手痒试试写个稍微完整点的解决方案, 作为总结及日后回顾之用. 项目中的bootstrap版本是3.X , 作为项目后台使用. 在项目进行过程中遇到组件弹出框无法垂直居中,示例demo代码如下: <!DOCTYPE html> <html> <head> <

修复bootstrap daterangepicker中的3个问题

最近项目中使用了一个基于Bootstrap的daterangepicker控件. 1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上. 具体描述: 1.点击打开日期选择框 2.选择一个日期范围,用户没有点击"Apply"按钮,然后点击页面其他空白区域,控件会把选择的日期赋值到文本框中去. 这个需求估计在国外属于正常的情况.但是国内的用户习惯是:点击其他空白地方,应该是和点击"取消"按钮相同的作用.所以看了一下源代码.在outsideClick方法里面,作者

bootstrap modal 垂直居中对齐

bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/JavaScript/#modals Html代码   <div class="modal fade" id="sqh_model"> <div class="modal-dialog"> <div class="mod

在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定

在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户提供较好的数据录入体验,本篇继续上篇的内容,继续介绍这个直接录入的处理操作,主要涉及到控件的初始化和数据源的绑定等操作内容,随着对这个处理的深入了解,我发现可以控制的内容也更加丰富,能够更好的实现各种所需的效果. 1.直接录入数据的界面分析 在之前介绍的数据直接录入处理的时候,界面效果如下所示. 上面的界面处