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


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

Любые идеи, почему это или что я могу сделать, чтобы это исправить?


В случае, если кто-то еще какое-то время ищет открытые теги и т. Д., Пытаясь выяснить, почему это происходит, для меня именно расширение 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 из модального и его предков, пока проблема не исчезнет. Однако это может изменить внешний вид и функционирование страницы.

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>

Это было и для меня тоже. Спасибо!
ПедроТанака

Просто была та же проблема, то же решение для таблицы стилей версии, похоже, помогло всем! Спасибо
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).


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');
});

Это работает за исключением того, что нажатие на фон не закрывает диалоговое окно, как ожидается.
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;
}

Моей проблемой был также 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>

+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>тегом.


Вы спасли мой день ... Это хорошая альтернатива!
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



3

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

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

3

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

.modal-backdrop {
    display:none;
}

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


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)

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


3

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

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>


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

2

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

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

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

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