码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-12-06 13:47:49      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:payment   drop   choice   java   dal   imp   ace   显示   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
        });
    });

  

 

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

标签:payment   drop   choice   java   dal   imp   ace   显示   modal   

原文地址:http://www.cnblogs.com/skybreak/p/6137035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!