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

Я использовал код для моего модального кода прямо из примера 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;
}

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

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

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

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

1. Самый простой способ - просто переместить модальный элемент div, чтобы он находился вне каких-либо элементов со специальным позиционированием. Одно хорошее место может быть перед закрывающим тегом body </body>.
2. Кроме того, вы можете удалить position:свойства CSS из модального и его предков, пока проблема не исчезнет. Однако это может изменить внешний вид и функционирование страницы.

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

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

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

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

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

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

Что сработало: установив z-index .modal-background в -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>

Примечание : data-backdropатрибут должен быть установлен в false( другие опции : staticили 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">&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');
});

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

    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-index из .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;}

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

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

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

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

#myModal {
    z-index: 1500;
}

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

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

.my-module {
    z-index: 1500;
}

Используйте это в вашем модале:

data-backdrop="false" 

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

Вы должны обернуть тело и нижний колонтитул модального окна модальным диалогом и модальным контентом.

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

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

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

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

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

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

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

Это можно легко решить с помощью некоторых дополнительных стилей 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>тегом.

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

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

.modal {
    z-index: 1101;
}

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

.modal-backdrop{
  z-index:0;
}

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

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

Измените абсолютную позицию на относительную.

.modal-backdrop {
    position: relative;
    /* ... */
}

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

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

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

.modal-backdrop {
    display:none;
}

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

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

в начальной загрузке 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)

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

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

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

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

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

.modal-backdrop {position: relative;}

$('.modal').insertAfter($('body'));

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

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}

<div class="my-modal-wrapper"></div>

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

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

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