解决select2在bootstrap的modal中默认不显示的问题

摘要:
代码解决如下:/*select2在Bootstrap的modal中默认被遮盖,现在强制显示在最前*/.select2-drop{z-index:10050!important;}/*防止select2不会自动失去焦点*/.select2-container{z-index:16000!important;}因为modal可能是后生成的,所以绑定select2事件时,应该先指定其父元素:$;在弹出modal里面是单选select2的时候,我遇到过无法输入的问题,这个时候,只需要把Modal上的tabindex属性删除就行了,

转https://www.cnblogs.com/skybreak/p/6137035.html

在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属性删除就行了,(removetabindex="-1"from modal)

免责声明:文章转载自《解决select2在bootstrap的modal中默认不显示的问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇射频识别技术漫谈(14)——S50与S70存取控制【worldsing笔记】[LUOGU] P1828 香甜的黄油 Sweet Butter下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

select2的相关问题

在弹出框中无法使用select2的问题: 通常情况下,使用select2只需要在加载相关js和css后,添加如下代码即可: $("#selectId").select2(); 但如果这个select在弹出框中,这样使用往往是无效的,这时候需要这样写: $.fn.modal.Constructor.prototype.enforceFocus = funct...

bootstrap添加多个模态对话框支持

  因为项目需要,在页面交互上要弹出多个dialog窗口,而bootstrap的modal支持弹出dialog窗口,但是在此基础上,会出先遮罩层越来越多,背景越来越黑的情况代码具体如下:(function(){ modal = {}; modal.openDialog = function(url, title, width, height, id){...

AngularJS+Select2实现多选框

AngularJS+Select2实现多选框 Select2是一款下拉框美化插件chosen的扩展,它能让丑陋的、很长的select选择框变的更好看、更方便,支持搜索,远程数据集,以及无限滚动的结果。 效果预览 有了select2,你就可以实现这样的下拉框 引入资源 和所有和js插件一样,select2也需要引入一些资源。这里提供一份在线版的和一份本地版...

chrome升级后出现滚动条无法滚动

最近升级chrome最新版本后,导致项目中功能页面的局部滚动条无法滚动(心里暗骂了很久),无论怎么滚动都是最外层的滚动条响应... 1、猜想:尼玛google应该不会干事件流混乱这种事,pass; 2、有莫名浮层干扰:经过千方对比发现是由外容器的position: absolute、 z-index: xx导致,去掉z-index属性后,滚动正常;问题来...

select2动态查询及多选

引入select2.min.js和select2.css <link rel="styleSheet" href="http://t.zoukankan.com/plugin/select2/css/select2.css" type="text/css"> <script src="http://t.zoukankan.com/plug...

layui下拉多选formSelects使用方法

下载formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js) 下载地址:https://fly.layui.com/extend/formSelects/#download <link rel="stylesheet" href="http://t.zoukankan.com/style/fo...