Как предотвратить отображение модального диалога bootstrap на весь экран?

Question

Когда я добавляю диалог <div class='modal hide fade'> в div с фиксированным позиционированием (позиция: исправлено в css) и вызывается модальным ('show') в этом диалоговом окне, фон закрывает весь экран, что делает невозможным взаимодействие с диалогом. Когда родительский div не фиксирован, эта проблема не существует.

Как я могу использовать диалог Bootstrap Модальные без изменения позиционирования DIV?

Я использую Bootstrap 2.3.2, кстати.

Я отправлю скрипку позже, если никто не знает об этой конкретной проблеме.

Answer 1

Я в конечном итоге решаю эту проблему, используя положение: абсолютное место с фиксированным положением. Но я понял, почему это происходит в первую очередь: Это Chrome-единственная проблема, потому что в какой-то версии Chrome выпущен в прошлом году, они решили поставить фиксированные элементы в другом контексте слоя из корневого контекста. Эта ссылка ясно объясняет это: http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements.

Пример такой: если элемент A (фиксированный) имеет z-индекс 1, а другой незафиксированный элемент B имеет z-индекс 2, еще один элемент C (дочерний элемент A) имеет z-индекс 3. Если вы сделать их в Chrome, B выше C, потому что C находится в контексте A, а B выше A, BCA. В других браузерах слои C-B-A, как и ожидалось.

Если вы столкнулись с этой проблемой, вы можете либо не использовать фиксированное позиционирование, как я, либо сделать какую-то специальную обработку для Chrome, как мы всегда делаем с IE.

Answer 2

Настройка внешнего z-индекса div на большее значение, чем индекс z-индекса модального фона (который был 1040), работал для меня.

#someDiv { 
    position: fixed; 
    z-index: 1041; 
} 

См. this example.