Модал начальной загрузки Twitter открывается перед формой - PullRequest
Новая
       8

Модал начальной загрузки Twitter открывается перед формой

25 голосов
/ 28 марта 2012

У меня проблема с модальностью начальной загрузки Twitter: она открывается перед моей формой.Я понятия не имею о том, что я сделал, потому что это работало очень хорошо 3 дня назад.Я могу написать на форме;Я думаю, что форма работает.Проблема в модальном открытии перед формой.

http://dl.dropbox.com/u/41175751/Screen%20Shot%202012-03-28%20at%2012.04.11.png

Ответы [ 9 ]

13 голосов
/ 17 апреля 2012

У класса .modal-backdrop z-индекс установлен в 1040, а у navbar-fixed-top z-индекс установлен в 1030. Следовательно, фон отображается над формой.

Переопределите значение .modal-backdrop z-index в вашем CSS-файле, установив для него значение, которое меньше значения z-индекса navbar. Это решит проблему.

10 голосов
/ 24 апреля 2012

У меня были похожие проблемы. Я обратился к ним здесь: http://jsfiddle.net/ATeaH/8/

5 голосов
/ 11 декабря 2012

Простое решение, упомянутое Нильсеном выше, которое сработало для меня ...

У меня был div Я прикрепляю свой модал к внутри навигационной панели. Я переместил div за пределы панели навигации - прямо под <body>

Проблема решена!

0 голосов
/ 18 июля 2016

Если вы используете SASS, вы можете сделать следующее внутри _modals.scss : 

.modal-dialog {
  position: relative;
  z-index: $zindex-modal-background; // copy-pasted z-index from .modal-backdrop
  width: auto;
  margin: 10px;
}
0 голосов
/ 10 февраля 2015

Добавьте следующее к вашему CSS

 .modal-dialog {
    z-index: 1050;
 }
0 голосов
/ 18 сентября 2014

Я работаю с AngularJS и столкнулся с той же проблемой.Для пояснения, мой модал был в другом HTML-файле, который Angular вводит в DOM во время выполнения через ng-view.То, что вызвало эту проблему для меня, было то, что у меня был класс анимации CSS на div, где был мой ng-view.Например: 

<div ng-app="myApp">
    <div class="pageTransition" ng-view></div> <!-- problem: class="pageTransition"-->
</div>

Удаление класса css устранило проблему и восстановило мой модальный режим до нормального рабочего порядкаРешение этой проблемы состояло бы в том, чтобы заменить стандартный класс Angular ng-class .Таким образом, вы можете динамически добавлять, изменять или удалять класс при использовании модального режима.

0 голосов
/ 18 апреля 2014

Попробуйте это решение, оно у меня сработало: 

$('#myModal').appendTo("body").modal('show');
0 голосов
/ 20 февраля 2014

У меня была такая же проблема.В моем случае это произошло из-за незакрытого div в моем заголовке.

0 голосов
/ 11 сентября 2013

У меня возникла похожая проблема, когда модал вставлялся в DOM через AJAX.Без обновления страницы модал остался за маской и был недоступен.

Интересно, что модал отлично работал с обновлением страницы.Хотя я вставлял модал в то же место с AJAX, как и с HTML, он не будет работать с AJAX.Мое исправление состояло в том, чтобы добавить модальную часть тела.Поэтому мой код был следующим: 

$('body').append(....j render partial....);

Я попробовал некоторые другие предложения, с которыми столкнулся (например, настройка z-index), но в моем случае это не помогло.

...