Twitter bootstrap modal открывается перед формой

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

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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

$('#myModal').appendTo("body").modal('show');

Ответ 7

Я работаю с 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. Таким образом, вы можете динамически добавлять, изменять или удалять класс при использовании модального.

Ответ 8

Добавьте в свой CSS

следующее:

 .modal-dialog {
    z-index: 1050;
 }

Ответ 9

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

.modal-dialog {
  position: relative;
  z-index: $zindex-modal-background; // copy-pasted z-index from .modal-backdrop
  width: auto;
  margin: 10px;
}