bootstrap modal與select2使用衝突解決

今天發現項目使用bootstrap modal 與 jquery select2 結合時發現select2不起做用，點擊select框不顯示選項，查閱資料後發現是由於modal層遮擋了select2的選擇層

下面是解決方案（親測），分兩步

 

1. select2 加入 dropdownParent 屬性，設置父元素modal

$(".select2-demo").select2({
    dropdownParent:$("#Modal-demo")
});

2. css設置 讓select2的選擇彈出層位於最上層，不然將被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;
    }