zoukankan      html  css  js  c++  java
  • 解决select2在bootstrap的modal中默认不显示的问题

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

  • 相关阅读:
    C# 动态添加用户控件
    临时记载C#中给DataGrid添加甘特图效果
    xp去掉快捷方式上的箭头
    wpf DataGrid的操作
    一路向前的算法
    WPF 解决WebBrowser控件汉字出现乱码的一种方案
    在CentOS 7 上安装 WordExpress
    创建Chrome插件
    开始PHP和JAVA
    failedtoloadcbsonextension
  • 原文地址:https://www.cnblogs.com/jimz/p/9967810.html
Copyright © 2011-2022 走看看