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

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

Примечание: 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">&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-индекс из .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 modal-backdrop fade, в котором в моем случае есть Z-индекс 1040, поэтому, если вы поместите модальный диалог поверх этого, он больше не должен быть серым.

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

data-backdrop="false" 

ни один из предложенных выше решений не работает для меня, но этот метод решения вопроса:

$('#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-стилей..

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

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

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

С помощью отладчика google можно исследовать фон элемента и изменять атрибуты. Главный рубильник.

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

измените абсолютное положение на относительное.

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

вы также можете удалить 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)

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

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

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

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

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

только сняли Z-индекс: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;
}