Bootstrap модальные появляться под фон
я использовал код для моего модального прямо из примера Bootstrap и включил только bootstrap.js(а не bootstrap-модальный.в JS). Тем не менее, мой модальный появляется под серым fade (backdrop) и не редактируется.
вот как это выглядит:
посмотреть эта скрипка на один способ воспроизведения этой проблемы. Основная структура этого кода такова: это:
<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>
css prettyprint-override">body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
любые идеи, почему это или то, что я могу сделать, чтобы исправить это?
30 ответов
Если модальный контейнер имеет фиксированное или относительное положение или находится в элементе с фиксированным или относительным положением, это поведение произойдет.
убедитесь, что модальный контейнер и все его родительские элементы расположены по умолчанию путь для решения проблемы.
вот несколько способов сделать это:
- самый простой способ-просто переместить модальный div, чтобы он находился вне любых элементов со специальным позиционированием. Одним хорошим местом может быть непосредственно перед закрывающим тегом body
</body>
. - кроме того, вы можете удалить
position:
свойства CSS от модального и его предков, пока проблема не исчезнет. Однако это может изменить внешний вид и функции страницы.
проблема связана с позиционированием родительских контейнеров. Вы можете легко "переместить" свой модальный из этих контейнеров перед его отображением. Вот как это сделать, если вы были show
ing ваш модальный с помощью js:
$('#myModal').appendTo("body").modal('show');
или, если вы запускаете модальные с помощью кнопок, отбросьте .modal('show');
и вобще:
$('#myModal').appendTo("body")
это сохранит все нормальные функции, что позволит вам показать модальный с помощью кнопки.
Я пробовал все варианты, приведенные выше, но не получил его для работы с помощью них.
что сработало: установка z-индекса .modal-фон до -1.
.modal-backdrop {
z-index: -1;
}
кроме того, убедитесь, что версии BootStrap css и js совпадают. Различные версии также могут сделать модальное появление под фоном:
например:
плохое:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
хорошо:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
я тоже столкнулся с этой проблемой и ни одно из решений не работал для меня, пока я не понял, что я на самом деле не нужен фон. Вы можете легко удалить фон с кодом следующему.
<div class="modal fade" id="createModal" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create Project</h4>
</div>
<div class="modal-body">Not yet made</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Примечание: the data-backdrop
атрибут должен быть установлен в false
(другие функции: static
или true
).
Я заставил его работать, дав высокое значение z-индекса модальному окну после открываем его. Например:
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
решение, предоставленное @Muhd, - лучший способ сделать это. Но если вы застряли в ситуации, когда изменение структуры страницы не является вариантом, используйте этот трюк:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
трюк здесь data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"
путем удаления фона по умолчанию и создать фиктивный, установив цвет фона самого диалога с некоторой Альфа.
обновление 1: Как отметил @Gustyn, нажатие на фон не делает закройте диалоговое окно, как ожидается. Поэтому для этого вам нужно добавить код Java-скрипта. Вот пример того, как этого можно достичь.
$('.modal').click(function(event){
$(event.target).modal('hide');
});
A, но поздно об этом, но вот общее решение -
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
{
prevTarget = e.target;
checkeventcount++;
e.preventDefault();
$(e.target).appendTo('body').modal('show');
}
else if(e.target==prevTarget && checkeventcount==2)
{
checkeventcount--;
}
});
перейдите по этой ссылке - Bootstrap 3-модальное исчезновение под фоном при использовании фиксированной боковой панели для сведения.
другой способ приблизиться к этому-удалить Z-индекс из .modal-backdrop
в Bootstrap.стиль CSS. Это приведет к тому, что фон будет на том же уровне, что и остальная часть вашего тела (он все равно исчезнет), а ваш модальный будет сверху.
.modal-backdrop
выглядит так
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
просто добавьте две строки CSS:
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
The .модальный фон должен иметь значение 1050, чтобы установить его над навигационной панелью.
Я просто установила:
#myModal {
z-index: 1500;
}
и это работает....
для первоначального вопроса:
.my-module {
z-index: 1500;
}
эта проблема часто может возникнуть при использовании таких вещей, как градиенты в CSS для таких вещей, как фоны или даже заголовки аккордеона.
к сожалению, изменение или переопределение основного загрузочного 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 модального была изменена!
вы должны обернуть свой модальный верхний и Нижний колонтитулы с модальным диалогом и модальным контентом
<div class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
**here goes the modal header body and footer**
</div>
</div>
</div>
У меня была эта проблема, и самый простой способ исправить это был addind z-index больше 1040 на модальном диалоге div:
<div class="modal-dialog" style="z-index: 1100;">
Я считаю, что bootstrap создает модальный фон div, в котором в моем случае есть Z-индекс 1040, поэтому, если вы поместите модальный диалог поверх этого, он больше не должен быть серым.
ни одно из предложенных выше решений не сработало для меня, но этот метод решил проблему:
$('#myModal').on('shown.bs.modal', function() {
//To relate the z-index make sure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
//Now set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
установить Z-индекса .модальный до наивысшего значения
например, .sidebarwrapper имеет Z-индекс 1100, поэтому установите Z-индекс .модальным 1101
.modal {
z-index: 1101;
}
у меня есть более легкое и лучшее решение..
это может быть легко решить с помощью некоторых дополнительных CSS-стилей..
-
скрыть класс
.modal-backdrop
(автоматически генерируется из Bootstrap.в JS).modal-backdrop { display:none; visibility:hidden; position:relative }
-
установить фон
.modal
на черном фоне изображения..modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; }
это будет работать лучше всего, если у вас есть требование, которое требует модального быть внутри элемента и не рядом с </body>
тег..
в моем случае решите это, добавьте это в мою таблицу стилей:
.modal-backdrop{
z-index:0;
}
С помощью отладчика google можно изучить фон элемента и изменить атрибуты. Гуг удачи.
в вашем navbar navbar-fixed-top
нужно z-index = 1041
а также, если вы используете bootstarp-combined.min.css
также изменить .navbar-fixed-top, .navbar-fixed-bottom
z-index to 1041
вы также можете удалить Z-индекс .модальный фон. Полученный css будет выглядеть так.
.modal-backdrop {
}
.modal-backdrop.in {
opacity: .35;
filter: alpha(opacity=35); }
Я нахожу, что:
в bootstrap 3.3.0 это неправильно, но когда в bootstrap 3.3.5 это правильно.давайте посмотрим код. 3.3.0:
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.prependTo(this.$element)
3.3.5
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
Это будет охватывать все модалы, не испортив ни одной анимации или ожидаемого поведения..
$(document).on('show.bs.modal', '.modal', function () {
$(this).appendTo('body');
});
в моем случае у меня была обертка со следующим:
.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}
только удалил z-index: 1 и понятия не имею, почему Исправлена проблема. также для удаления относительную позицию, но не нужно.
в моем случае, причиной был boostrap.минута.css :) как только я исключил его из своего html-файла в качестве ссылки, диалог показал в forn модального оттенка:)
Я удалил модальный фон.
.modal-backdrop {
display:none;
}
Это не лучшее решение, но работает для меня.
я исправил это, добавив стиль ниже к тегу DIV
style="background-color: rgba(0, 0, 0, 0.5);"
и добавить пользовательский css
.modal-backdrop {position: relative;}
попробуйте перезаписать класс .modal-открыть значение переполнения из скрытого в видимое.
.modal-open {
overflow: visible;
}