Я использовал код для моего модального кода прямо из примера Bootstrap и включил только bootstrap.js (а не bootstrap-modal.js). Тем не менее, мой модал появляется под серым цветом (фон) и не редактируется.
Вот как это выглядит:
Посмотрите эту скрипку для одного способа воспроизвести эту проблему. Основная структура этого кода выглядит следующим образом:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}Любые идеи, почему это или что я могу сделать, чтобы это исправить?
javascript
css
twitter-bootstrap
modal-dialog
natlines
источник
источник
overflow-x: hiddenприложением к контейнеру модала.Ответы:
Если модальный контейнер имеет фиксированное или относительное положение или находится внутри элемента с фиксированным или относительным положением, такое поведение будет иметь место.
Убедитесь, что модальный контейнер и все его родительские элементы расположены по умолчанию для решения проблемы.
Вот несколько способов сделать это:
</body>.position:свойства CSS из модального и его предков, пока проблема не исчезнет. Однако это может изменить внешний вид и функционирование страницы.источник
</body>иbodyне имею никакогоpositionстиля. Любая другая идея?Проблема связана с позиционированием родительских контейнеров. Вы можете легко «переместить» ваш модал из этих контейнеров перед его отображением. Вот как это сделать, если вы
showиспользуете модал с помощью js:Или, если вы запускаете модал с помощью кнопок, отпустите
.modal('show');и просто сделайте:Это сохранит все обычные функции, позволяя вам показывать модальные кнопки.
источник
$('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })Я перепробовал все варианты, представленные выше, но не смог их использовать.
Что сработало: установив z-index .modal-background в -1.
источник
z-index: 0;-1заставит его появляться позади других элементов на странице, таких как панели. Но установив его,3сделайте его выше всего, кроме модального всплывающего окна.Также убедитесь, что версии BootStrap css и js совпадают. Различные версии также могут сделать модальный вид под фоном:
Например:
Плохой:
Хорошо:
источник
Я также сталкивался с этой проблемой, и ни одно из решений не работало на меня, пока я не понял, что на самом деле мне не нужен фон. Вы можете легко удалить фон с помощью следующего кода.
Примечание :
data-backdropатрибут должен быть установлен вfalse( другие опции :staticилиtrue).источник
Я заставил его работать, передав высокое значение z-index модальному окну ПОСЛЕ его открытия. Например:
источник
Решение, предоставленное @Muhd, является лучшим способом сделать это. Но если вы застряли в ситуации, когда изменение структуры страницы невозможно, используйте этот прием:
Хитрость здесь в том
data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);", чтобы удалить фон по умолчанию и создать фиктивный, установив цвет фона самого диалога с некоторой альфа-версией.Обновление 1: Как отметил @Gustyn, нажатие на фон не закрывает диалоговое окно, как ожидается. Таким образом, чтобы добиться этого, вы должны добавить код Java-скрипта. Вот пример того, как вы можете этого достичь.
источник
Но поздно на этом, но вот общее решение -
Посетите эту ссылку - Bootstrap 3 - модал исчезает под фоном при использовании фиксированной боковой панели для деталей.
источник
Другой способ сделать это - удалить z-index из
.modal-backdropфайла bootstrap.css. Это приведет к тому, что фон будет на том же уровне, что и остальная часть вашего тела (оно все равно исчезнет), а ваш модальный будет на вершине..modal-backdropвыглядит такисточник
Просто добавьте две строки CSS:
.Modal-background должно иметь значение 1050, чтобы установить его над панелью навигации.
источник
position: fixedэто не сработает.Это будет охватывать все модальные моды, не портя анимацию или ожидаемое поведение.
источник
Я просто установил:
и это работает ....
Для исходного вопроса:
источник
Используйте это в вашем модале:
источник
Эта проблема часто возникает при использовании таких вещей, как градиенты в CSS для таких вещей, как фон или даже заголовки аккордеона.
К сожалению, изменение или переопределение ядра Bootstrap CSS нежелательно и может привести к нежелательным побочным эффектам. Наименее навязчивый подход - добавить,
data-backdrop="false"но вы можете заметить, что эффект затухания больше не работает, как ожидалось.После последних выпусков Bootstrap версия 3.3.5, похоже, решает эту проблему без нежелательных побочных эффектов.
Загрузить: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Не забудьте включить файлы CSS и файлы JavaScript из 3.3.5.
источник
Привет, у меня была та же проблема, тогда я понимаю, что, когда вы используете bootsrap 3.1 В отличие от более старых версий bootsrap (2.3.2), html-структура модала была изменена!
Вы должны обернуть тело и нижний колонтитул модального окна модальным диалогом и модальным контентом.
источник
Ни одно из предложенных выше решений не помогло мне, но этот метод решил проблему:
источник
У меня была эта проблема, и самый простой способ ее исправить - это addind z-index больше 1040 в div модального диалога:
Я полагаю, что bootstrap создает div-модальное затухание в div, в котором в моем случае есть z-index 1040, поэтому, если вы поместите модальное диалоговое окно поверх этого, оно больше не должно быть серым.
источник
У меня есть более легкое и лучшее решение ..
Это можно легко решить с помощью некоторых дополнительных стилей CSS.
скрыть класс
.modal-backdrop(автоматически сгенерированный из Bootstrap.js)установите фон
.modalдля полупрозрачного черного фонового изображения.Это будет работать лучше всего, если у вас есть требование, чтобы модал был внутри элемента, а не рядом с
</body>тегом.источник
установите z-index .modal на максимальное значение
Например, .sidebarwrapper имеет z-индекс 1100, поэтому установите z-индекс .modal равным 1101.
источник
В моем случае решите это, добавьте это в мою таблицу стилей:
с помощью Google отладчика, можете изучить элемент BACKDROP и изменить атрибуты. Гуг удачи.
источник
в вашем Navbar
navbar-fixed-topнужно,z-index = 1041а также, если вы используетеbootstarp-combined.min.cssтакже изменить.navbar-fixed-top, .navbar-fixed-bottomz-index to 1041источник
Измените абсолютную позицию на относительную.
источник
Вы также можете удалить z-index из .modal-background. Результирующий CSS будет выглядеть следующим образом.
источник
Я убрал модальный фон.
Это не лучшее решение, но у меня работает.
источник
что я нахожу, что это:
в начальной загрузке 3.3.0 это не правильно, но когда в начальной загрузке 3.3.5 это правильно. Посмотрите код. 3.3.0:
3.3.5
источник
Добавьте это на свои страницы. Это работает для меня.
источник
Я исправил это, добавив стиль ниже к тегу DIV
И добавить пользовательские CSS
источник
источник
Для меня самым простым решением было поместить мой модал в обертку с абсолютной позицией и z-индексом выше, чем .modal-background. Так как модальный фон (по крайней мере, в моем случае) имеет z-индекс 1050:
источник
В моем случае у меня была обертка со следующим:
Только удалил z-index: 1 и понятия не имею, почему исправлена проблема. Также наверняка снятие относительной позиции сделало, но мне это было нужно.
источник