модальный бутстрап с select2 z-index

Я пытаюсь загрузить контент с другой html-страницы во всплывающее окно, а затем применить к нему select2.

все работает, но z-индекс для select2 неверен, если я изменил его на большее значение, чем диалоговое окно начальной загрузки.

введите описание изображения здесь

вот фрагмент того, что я делаю

.select2-dropdown {  
  z-index: 10060 !important;/*1051;*/
}

Любые идеи ?


bootstrap-modal jquery-select2-4
person Mustafa Magdy    schedule 24.07.2015    source источник
comment
Вы пометили это с помощью Select2 4.0.0, но ваш снимок экрана определенно из более старой версии. Какую версию Select2 вы используете?   -  person Kevin Brown    schedule 25.07.2015
comment
Нет, я уже ссылался на версию 4.0..., это работало на 3.5.x, но я обновился до версии 4.0 и не ссылаюсь на старую версию.   -  person Mustafa Magdy    schedule 25.07.2015
comment
Вы проверили этот документ: select2.org/troubleshooting/common-problems. Похоже, у select2 v4 есть известная проблема с модальным загрузчиком   -  person Cassio Seffrin    schedule 27.04.2018
comment
@CassioSeffrin, огромное спасибо!   -  person joker    schedule 12.06.2018

Ответы (6)


arrow_upward
24
arrow_downward

Объединение пары решений, найденных в системе отслеживания проблем Select2 GitHub, похоже, позволяет Select2 v4 работать с модальными окнами Bootstrap.

Добавьте этот css...

.select2-container--open {
    z-index: 9999999
}

Тогда я все еще не мог ввести в поле поиска... удаление атрибута "tabindex" из модального div исправило это.

person Dan    schedule 03.07.2018

arrow_upward
7
arrow_downward

На самом деле, вы не должны возиться с z-индексом Select2.

Вы должны определить модальность, в которой отображается select2, например:

$(document).ready(function() { 
    $("#s2id_autogen5").select2({ 
        dropdownParent: $("#myModal") 
    }); 
});

Предполагая, что ваш модальный идентификатор myModal (он не читается на вашем изображении).

Это позволит избежать эффекта z-индекса, а также избежать других побочных эффектов возни с z-индексом (например, сделать поле поиска select2 недоступным).

person Marcelo Myara    schedule 27.08.2020
comment
Я сделал это, и он выдвигается, но список находится за модальным. - person Guilherme Flores; 31.08.2020
comment
Привет @GuilhermeFlores. Есть ли у вас какие-либо другие css, влияющие на Z-Order select2 или какие-либо из его внутренних элементов? Если это так, просто отключите все это и убедитесь, что значение dropdownParent указано для модального контейнера начальной загрузки. - person Marcelo Myara; 31.08.2020

arrow_upward
3
arrow_downward

Я надеюсь, что это работает

Попробуйте удалить tabindex="-1" из модального окна.

person Mayank Vadiya    schedule 09.04.2019
comment
Это сработало для меня, у меня были проблемы с этим, я знаю, что вкладка не закроет модальное окно, но это лучше, чем ничего не писать в поле поиска select2. - person allexiusw; 27.05.2021

arrow_upward
0
arrow_downward

У меня была такая же проблема, но я использовал это решение

style="z-index: 50 !важно;" прямо в модальном

<div id="mdl_name_id" class="modal " tabindex="-1"  style="z-index: 50 !important;" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">

person inmodemo    schedule 17.10.2017

arrow_upward
0
arrow_downward

Это выглядит грязно, для меня оба эти требования необходимы:

.modal{
    z-index: 100000 !important;
}

.select2-container--open {
    z-index: 9999999 !important;
}
person SirSaleh    schedule 11.04.2020

arrow_upward
0
arrow_downward

Добавить пользовательский CSS с классом modal-open

.modal-open .select2-container {
  z-index: 9999;
}
person Jaydeep Chauhan    schedule 15.10.2020