在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)
