Select2 не работает, если он встроен в загрузочный модальный

Хорошо, у меня все получилось.

изменение

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

в

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

(удалить <! - Modal -> <div class = "modal fade" id = "myModal" tabindex = "- 1" role = "dialog" aria-labelledby = "myModalLabel"> <div class = "модальный диалог "role =" document "> <div class =" modal-content "> <div class =" modal-header "> <button type =" button "class =" close "data-reject =" modal "aria-label = «Закрыть»> <span aria-hidden = "true"> & times; </ span> </ button> <h4 class = "modal-title" id = "myModalLabel"> Модальный заголовок </ h4> </ div> < div class = "modal-body"> <select id = "select2insidemodal" multiple = "multiple"> <option value = "AL"> Alabama </ option> ... <option value = "WY"> Wyoming </ option > </ select> </ div> <div class = "modal-footer"> <button type = "button" class = "btn btn-default" data-reject = "modal"> Закрыть </ button> <тип кнопки = "button" class = "btn btn-primary"> Сохранить изменения </ button> </ div> </ div> </ div> </ div> <script> $ (document) .ready (function () {$ («# select2insidemodal»). select2 ({dropdownParent: $ ("# myModal")});}); </ script> из модального)

Я нашел решение для этого на github для select2

https://github.com/ivaynberg/select2/issues/1436

Решение:

tabindex="-1"

Объяснение скопировано из приведенной выше ссылки:

Bootstrap регистрирует слушателя в событии focusin, который проверяет, является ли сфокусированный элемент либо самим наложением, либо его потомком, если он не перефокусируется на наложении. С выпадающим списком select2, прикрепленным к телу, это фактически мешает вам вводить что-либо в текстовое поле.

Вы можете быстро исправить это, перезаписав функцию принудительного использования, которая регистрирует событие на модальном

Для Select2 v4:

Используйте «dropdownParent», чтобы прикрепить раскрывающийся список к модальному диалоговому окну, а не к телу HTML.

overflow:hidden

Это добавит выпадающее меню Select2, чтобы оно попадало в DOM модального, а не на тело HTML (по умолчанию). См. Https://select2.github.io/options-old.html#dropdownParent

Просто удалите tabindex="-1"и добавьте стиль<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;"> <!---content modal here --> </div>

Вот пример:

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

A±

Это мое решение с select2 4.0.0. Просто переопределите css прямо под import select2.css. Убедитесь, что z-индекс больше, чем ваш диалог или модальный. Я просто добавляю 2000 по умолчанию. Потому что z-index моих диалогов составляет около 1000.