Я использовал код для моего модала прямо из примера Bootstrap и включил только bootstrap.js (но не bootstrap-modal.js). Однако мой модал отображается под серым блеклым фоном и не редактируется.
Вот как это выглядит:
Смотрите [этот фиддл][2] для одного способа воспроизвести эту проблему. Основная структура этого кода выглядит следующим образом:
<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;
}
Есть идеи, почему так происходит или что я могу сделать, чтобы исправить это?
Если модальный контейнер имеет фиксированное или относительное положение или находится внутри элемента с фиксированным или относительным положением, это поведение будет иметь место.
Убедитесь, что модальный контейнер и все его родительские элементы позиционированы по умолчанию, чтобы устранить проблему..
Вот несколько способов сделать это:
</body>
.position:
у модального div и его предков, пока проблема не исчезнет. Однако это может изменить внешний вид и работу страницы.Проблема связана с позиционированием родительских контейнеров. Вы можете легко "переместить" ваш модал из этих контейнеров перед его отображением. Вот как это сделать, если вы показываете
свой модал с помощью js:
$('#myModal').appendTo("body").modal('show');
Или, если вы запускаете модал с помощью кнопок, отбросьте .modal('show');
и просто сделайте:
$('#myModal').appendTo("body")
Это сохранит всю обычную функциональность, позволяя вам показывать модал с помощью кнопки.
Я попробовал все варианты, предоставленная выше, но это'т заставить его работать, используя те.
Что сработало: установка по Z-индексу .модально-фон к-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>
Примечание: нуждается в атрибуте данных-задник должен быть установлен в false
(другие варианты: статический
или True
).
Я заставил его работать, задав большое значение z-index модальному окну ПОСЛЕ его открытия. Например:
$("#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>
</див>
Трюк здесь - данные-фон=то"ложные" в стиле=на"фонового цвета: RGBA(0, 0, 0, 0.5);"
В путем удаления по умолчанию фон и создать обманку, установив цвет фона диалогового окна с какой-нибудь Альфа.
Обновление 1: Как указал @Gustyn, что при нажатии на фон не закрывает диалоговое окно, как ожидалось. Поэтому чтобы достичь этого, вы должны добавить некоторый код JavaScript. Вот несколько примеров как вы можете достичь этого.
$('.modal').click(function(event){
$(event.target).modal('hide');
});
Но поздно, на это, но вот это общее решение -
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--;
}
});
Перейдите по этой ссылке - https://stackoverflow.com/questions/21126617/bootstrap-3-modal-disappearing-below-backdrop-when-using-a-fixed-sidebar/21127348#21127348 для получения подробной информации.
Просто добавьте две строки в CSS:
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
Интернет .модально-фон должна иметь значение 1050, чтобы установить его на панели навигации.
Другой способ-снять Z-индекса от.модально-фон` в Bootstrap.УСБ. Это приведет к тому фоне, чтобы быть на одном уровне с остальной части вашего тела (это все равно исчезают) и модальную, чтобы быть на вершине.
.модально-фон
выглядит так
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
Я'вэ просто установить:
#myModal {
z-index: 1500;
}
и он работает....
На исходный вопрос:
.my-module {
z-index: 1500;
}
Эту проблему часто можно испытать при использовании вещи, такие как градиенты в CSS для таких вещей, как фон или даже заголовки аккордеон.
К сожалению, изменения или переопределения ядро начальной загрузки CSS является нежелательным и может привести к нежелательным побочным эффектам. Наименее навязчивый подход, чтобы добавить данных-фон=то"ложные"` В, но вы можете заметить, что эффект затухания больше не работает, как ожидалось.
После последних релизах начальной загрузки, версия 3.3.5, кажется, решить эту проблему без нежелательных побочных эффектов.
Скачать: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Обязательно включите файлы, файлы CSS и JavaScript от 3.3.5.
У меня была эта проблема и самый простой способ исправить это был надстройкой Z-индекса больше, чем 1040 на модальный диалог див:
<div class="modal-dialog" style="z-index: 1100;">
Я считаю, загрузочный создать див модально-фон исчезают, что в моем случае имеет Z-индекс 1040, если вы так ставите модальный диалог на вершине этого, он не должен быть серым.
Это покроет все модальные глаголы не портя какой-либо из анимаций или ожидаемое поведение..
$(document).on('show.bs.modal', '.modal', function () {
$(this).appendTo('body');
});
Привет у меня была такая же проблема, тогда я понимаю, что когда вы с помощью 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>
У меня легче и лучше решение..
Это может быть легко решить с помощью дополнительных стилей CSS..
.модально-фон
(автоматически создается из Bootstrap.js).модально-фон { дисплей:нет; видимость:скрытый; позиция:относительная }
.модал { справочная информация:URL-адрес (и"http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // полупрозрачные изображения из Google Картинок Z-индекса:1100; }
Это работает лучше всего, если у вас есть требование, что должен модального быть внутри элемента, а не рядом в `</тело и GT; тег..
В моем случае решить, добавьте в свой стиль:
в
.modal-backdrop{
z-index:0;
}
в
с помощью отладчика Google, можно рассмотреть фон элемента и изменение атрибутов. Главный рубильник.
задать Z-индекс .модальное к высшей ценности
Например, .sidebarwrapper имеет Z-индекс 1100, поэтому установить Z-индекса .модальное к 1101
.modal {
z-index: 1101;
}
ни один из предложенных выше решений не работает для меня, но этот метод решения вопроса:
$('#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);
});