Бутстрап модальный появляется под фоном

576

Я использовал код для моего модального кода прямо из примера 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
источник
В случае, если кто-то еще какое-то время ищет открытые теги и т. Д., Пытаясь выяснить, почему это происходит, для меня именно расширение Chrome Feedly нарушило мои модальные возможности. Отключение расширения вернуло поведение в нормальное состояние.
— три
В некоторых случаях проблема была на iOS и была вызвана overflow-x: hiddenприложением к контейнеру модала.
— idmean
1
Создано 3 примера в 3 версиях. 3.3.1 работает нормально, а другие нет. Версия 3.3.1 jsfiddle Версия 3.3.5 jsfiddle Версия 3.3.6 jsfoddle
— Дмитрий
1
Созданный отчет об ошибках с командой Bootstrap кажется, что это не совсем ошибка, даже несмотря на то, что она хорошо работала в 3.3.1. Вы можете прочитать больше об этом в ссылке, которую я разместил.
— Дмитрий
Сообщение в блоге, имеющее

Ответы:

629

Если модальный контейнер имеет фиксированное или относительное положение или находится внутри элемента с фиксированным или относительным положением, такое поведение будет иметь место.

Убедитесь, что модальный контейнер и все его родительские элементы расположены по умолчанию для решения проблемы.

Вот несколько способов сделать это:

  1. Самый простой способ - просто переместить модальный элемент div, чтобы он находился вне каких-либо элементов со специальным позиционированием. Одно хорошее место может быть перед закрывающим тегом body </body>.
  2. Кроме того, вы можете удалить position:свойства CSS из модального и его предков, пока проблема не исчезнет. Однако это может изменить внешний вид и функционирование страницы.
— Muhd
источник
24
Хороший улов. К вашему сведению, не только «исправлено», но и положение родителя «родственник» также вызывает эту проблему
— Гианг Нгуен
3
@Muhd как вы убедитесь, что он и все его родительские элементы расположены по умолчанию?
— Indago
4
Предпочитаю использовать опцию 1: «просто переместите модальный div так, чтобы он находился вне любых элементов со специальным позиционированием». Thx
— mpgn
9
Я не понимаю этот ответ. Примеры Bootstrap показывают модальный div с несколькими классами вдоль линии «modal», «modal-fade» и т. Д. Внутри .modal он устанавливает position: fixed, а внутри «modal-body» он устанавливает position: относительный. Так как же перемещение модального контейнера что-то изменит, когда .modal устанавливает position: fixed?
— Карлос
4
У меня все еще есть эта проблема. Я добавляю это прямо раньше </body>и bodyне имею никакого positionстиля. Любая другая идея?
— Туан Ань Чан
383

Проблема связана с позиционированием родительских контейнеров. Вы можете легко «переместить» ваш модал из этих контейнеров перед его отображением. Вот как это сделать, если вы showиспользуете модал с помощью js:

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

Или, если вы запускаете модал с помощью кнопок, отпустите .modal('show');и просто сделайте:

$('#myModal').appendTo("body")

Это сохранит все обычные функции, позволяя вам показывать модальные кнопки.

— Адам Олбрайт
источник
12
Используйте этот общий обработчик событий, чтобы решение @leandrotk работало для всех модальных страниц, которые вы можете иметь на странице $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— Патрик М.
2
@PatrickM. Удивительно! это работало как очарование на старом проекте, который я взял на себя, и у них были модалы повсюду!
— denislexic
5
Это прекрасно работает, когда вы действительно не можете исправить позиционирование CSS. Спасибо :)
— alexcasalboni
Есть ли причина, по которой я теряю все CSS-форматирование при этом? И это легко исправить? :-)
— Евгений ван дер Мерве
1
От ответа leandrotk просто измените #myModal на .modal, чтобы он выглядел так: $ ('. Modal'). AppendTo ("body"). Это будет работать со всеми модалами, так как у них есть модальный класс по умолчанию.
— Нгатия Франклин
170

Я перепробовал все варианты, представленные выше, но не смог их использовать.

Что сработало: установив z-index .modal-background в -1.

.modal-backdrop {
  z-index: -1;
}
— Ян ван дер Бургт
источник
10
Это сработало отлично и на сегодняшний день является самым простым решением. Я использовалz-index: 0;
— Andrewcockerham
Также могу подтвердить, что работает только эта опция! Спасибо!
— Паром Краненбург
Спасибо! Это ошибка на BS3?
— mauriblint
1
Это не работает, если вы используете тему, которая имеет много различных z-индексов. Например, установка фона на -1заставит его появляться позади других элементов на странице, таких как панели. Но установив его, 3сделайте его выше всего, кроме модального всплывающего окна.
— Джастин Скилес
1
Я обнаружил, что это самый быстрый метод, после того как исчерпал предложения в ответах выше. В моем случае установка div с классом модального диалога в z-index 1060 вывела его перед оверлеем. Если вы используете панель навигации, вы захотите переместить модал над оверлеем, а не наоборот, иначе ваша панель навигации может появиться поверх оверлея ... хаос намекает ...
— Майк Девенни
152

Также убедитесь, что версии 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>
— Sid
источник
Это было и для меня тоже. Спасибо!
— ПедроТанака
Просто была та же проблема, то же решение для таблицы стилей версии, похоже, помогло всем! Спасибо
— HGB
Спасибо, это была моя точная проблема
— Malcor
Малькор без проблем, я потратил много времени, пока разобрался с этой ошибкой. Как мы видим, это было в 14 году, сейчас в 16, ошибка все еще существует. На самом деле это не ошибка, но в загрузчике авторы должны добавить это в их документации или что - то ..
— Sid
То же самое здесь, мы перешли к генерации нашего SASS и полностью забыли о самом файле js. Это должен быть главный ответ .. Так как наш модал всегда по умолчанию включен непосредственно перед тегом закрытия тела ...
— Angry 84
116

Я также сталкивался с этой проблемой, и ни одно из решений не работало на меня, пока я не понял, что на самом деле мне не нужен фон. Вы можете легко удалить фон с помощью следующего кода.

<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>

Примечание : data-backdropатрибут должен быть установлен в false( другие опции : staticили true).

— PieterVK
источник
2
Безусловно самое простое решение, и работает как шарм!
— learning_to_swim
Brilliant! Я также должен был требовать начальной загрузки - не уверен, почему все мои другие функциональные возможности Bootstrap работают нормально, но мне нужно было заставить модальную работу.
— Стив Кляйн
Отлично !!! боролся за один день .. и ты спас мне еще один день. Еще раз спасибо .. +1 и ура
— Бхаскара
1
Внимательно прочитав все решения, я обнаружил, что это самая разумная из сегодняшних версий bootstrap и jQuery. Спасибо.
— Шифрование
3
Спасибо! Этот вопрос имеет более 140 тысяч просмотров, и я не понимаю, почему загрузчик не может это исправить. да ладно, ура
— Чад
58

Я заставил его работать, передав высокое значение z-index модальному окну ПОСЛЕ его открытия. Например:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— Эндрю Дистер
источник
Это работает (мужчина говорит, что это так), почему вы отказываетесь голосовать? Пока я смотрю, кажется, что так и будет.
— Rolice
Да, кто-нибудь может объяснить, почему это плохой ответ? Это просто что-то вроде хакерства?
— brandones
6
Я не понимаю поданных голосов. Да, это хакерство, но другие решения не сработали для меня, поэтому я решил поделиться этим с людьми, которые не возражают против использования «хакерских» решений, чтобы просто заставить эту чертову штуку работать.
— Эндрю Дистер
Это было важно для понимания моей конкретной проблемы, заключающейся в том, чтобы поставить модальный элемент поверх полноэкранного элемента. +1
— Джек Стоун,
3
Это плохой ответ, потому что он взломан и не предпринимает никаких попыток указать на это. Другие ответы говорят: «Если ничего не работает, ты мог бы ...». Реальность такова, что модальные очень широко используются в Интернете и должны работать, если они реализованы правильно. Хакерские ответы не помогают людям понять, как все делать правильно.
— Лукос
35

Решение, предоставленное @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">&times;</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');
});
— Krishnendu
источник
Это работает за исключением того, что нажатие на фон не закрывает диалоговое окно, как ожидается.
— Gustyn
Кришненду, ты мой герой. Я пришел на работу с мыслью о гибели и унынии. За 3 дня до того, как моя последняя презентация столкнулась с этой проблемой, внезапно, по меньшей мере, я сломался. У моего друга заслуживают 100000 голосов, увы, могу дать только один :) удачного дня.
— DotNetBeginner
Когда я пытаюсь это сделать, он не охватывает весь фон страницы - только элемент div, в котором объявлен
— Will Sam
Работал отлично. Спасибо!
— gfernandes
Работал отлично. Спасибо!
— Маянк Пандейз
16

Но поздно на этом, но вот общее решение -

    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 - модал исчезает под фоном при использовании фиксированной боковой панели для деталей.

— Рохан
источник
Это было идеальное решение для плагина Wordpress, который я создавал, когда я не мог контролировать родительские элементы на темы других людей.
— Марк Руммель
Лучшее решение на сегодняшний день!
— digz6666
10

Другой способ сделать это - удалить z-index из .modal-backdropфайла bootstrap.css. Это приведет к тому, что фон будет на том же уровне, что и остальная часть вашего тела (оно все равно исчезнет), а ваш модальный будет на вершине.

.modal-backdrop выглядит так

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— Сэмюэль Бержерон
источник
10

Просто добавьте две строки CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.Modal-background должно иметь значение 1050, чтобы установить его над панелью навигации.

— Вахью Примади
источник
Хорошо, но если в контейнере для модалов position: fixedэто не сработает.
— CPHPython
10

Это будет охватывать все модальные моды, не портя анимацию или ожидаемое поведение. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— Кэм Туллос
источник
1
глобальное решение. Однако лучше найти проблему.
— Милад Абуали
Я не думаю, что это отличное решение, а как насчет страниц с большим количеством модальных? Может стать грязным.
— Глен
Можете ли вы объяснить, как это будет грязно? Все, что он делает - это перемещает модал от того места, где он сейчас находится в DOM, к концу тега body. Он не создает ничего, чего еще нет, просто перемещает его и автоматически присваивает ему верхний z-индекс.
— Cam
Лучшее решение, я думаю. не нужно редактировать css и изменять модальный вид
— Moslem7026
8

Я просто установил:

#myModal {
    z-index: 1500;
}

и это работает ....

Для исходного вопроса: 

.my-module {
    z-index: 1500;
}
— AmintaCode
источник
Моей проблемой был также z-index.
— Джеймс Лок
8

Эта проблема часто возникает при использовании таких вещей, как градиенты в 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.

— Ричард Налезински
источник
6

Привет, у меня была та же проблема, тогда я понимаю, что, когда вы используете 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>
— talsibony
источник
+1 убедитесь, что вы используете совместимые версии bootstrap.css и bootstrap.js и что ваша разметка соответствует используемой вами версии.
— Срайнер
Да, это был мой вывод, и я написал это здесь, только если у кого-то была эта проблема.
— Талсибоны
Иисус Христос, этот ответ похоронен глубоко. То же самое для Bootstrap 4.
— Рэнделл
6

Ни одно из предложенных выше решений не помогло мне, но этот метод решил проблему:

$('#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);
});
— Джавед Икбал
источник
Я предпочитаю этот способ, потому что я потерял форматирование CSS с другими методами.
— Юджин ван дер Мерве
6

У меня была эта проблема, и самый простой способ ее исправить - это addind z-index больше 1040 в div модального диалога:

<div class="modal-dialog" style="z-index: 1100;">

Я полагаю, что bootstrap создает div-модальное затухание в div, в котором в моем случае есть z-index 1040, поэтому, если вы поместите модальное диалоговое окно поверх этого, оно больше не должно быть серым.

— Крис Розете
источник
6

У меня есть более легкое и лучшее решение ..

Это можно легко решить с помощью некоторых дополнительных стилей CSS.

  1. скрыть класс .modal-backdrop(автоматически сгенерированный из Bootstrap.js)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. установите фон .modalдля полупрозрачного черного фонового изображения.

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

Это будет работать лучше всего, если у вас есть требование, чтобы модал был внутри элемента, а не рядом с </body>тегом.

— JM Tee
источник
Вы спасли мой день ... Это хорошая альтернатива!
— Notme
@xunga, не беспокойся. Пожалуйста, поделитесь этим решением с другими людьми :)
— JM Tee
Вы можете просмотреть изменения здесь ... stackoverflow.com/posts/42887253/revisions
— notme
Спасибо JM, ваше решение было единственным, которое сработало для меня.
— Ахмед Дж
5

установите z-index .modal на максимальное значение

Например, .sidebarwrapper имеет z-индекс 1100, поэтому установите z-индекс .modal равным 1101.

.modal {
    z-index: 1101;
}
— Мохудум Камил
источник
5

В моем случае решите это, добавьте это в мою таблицу стилей:

.modal-backdrop{
  z-index:0;
}
Развернуть фрагмент

с помощью Google отладчика, можете изучить элемент BACKDROP и изменить атрибуты. Гуг удачи.

— Цевин Овалле
источник
3

в вашем Navbar navbar-fixed-topнужно, z-index = 1041 а также, если вы используете bootstarp-combined.min.cssтакже изменить .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— Mohsin
источник
3

Вы также можете удалить z-index из .modal-background. Результирующий CSS будет выглядеть следующим образом.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— Мэтью Галлегос
источник
3

Я убрал модальный фон.

.modal-backdrop {
    display:none;
}

Это не лучшее решение, но у меня работает.

— CodeBriefly
источник
3

что я нахожу, что это:

в начальной загрузке 3.3.0 это не правильно, но когда в начальной загрузке 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)
— ttong
источник
3

Добавьте это на свои страницы. Это работает для меня.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— Такеи
источник
3

Я исправил это, добавив стиль ниже к тегу DIV

style="background-color: rgba(0, 0, 0, 0.5);"

И добавить пользовательские CSS

.modal-backdrop {position: relative;}
— RaymondLe
источник
3

Для меня самым простым решением было поместить мой модал в обертку с абсолютной позицией и z-индексом выше, чем .modal-background. Так как модальный фон (по крайней мере, в моем случае) имеет z-индекс 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
Развернуть фрагмент

— sivi911
источник
у меня работал z-index. Большое спасибо.
— Асиф Икбал
2

В моем случае у меня была обертка со следующим:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

Только удалил z-index: 1 и понятия не имею, почему исправлена ​​проблема. Также наверняка снятие относительной позиции сделало, но мне это было нужно.

— hsobhy
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.