Bootstrap модальный, появляющийся под фоном

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

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

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

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

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

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

Что работало:, установив z-index.modal-backdrop на -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-индекса в модальное окно ПОСЛЕ, открыв его. Например:.

$("#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 script. Вот пример того, как вы можете это достичь.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

A, но поздно, но вот общее решение -

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

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

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

Значение .modal-backdrop должно иметь значение 1050, чтобы установить его поверх навигационной панели.

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

.modal-backdrop выглядит следующим образом

.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, для таких вещей, как фоны или даже заголовки аккордеона.

К сожалению, изменение или переопределение ядра 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.

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

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

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

Привет, у меня была такая же проблема, но я понимаю, что при использовании 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.

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

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

• установите фон .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-index от .modal до 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);
}); 

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

data-backdrop="false" 

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

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

с отладчиком google, можно проверить элемент BACKDROP И изменить атрибуты. Удача Goog.

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

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

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

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

в bootstrap 3.3.0 это не правильно, но когда в bootstrap 3.3.5 это right.let, см. код. 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)

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

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

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

.modal-backdrop {
    display:none;
}

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

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

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

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

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

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

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

.modal-backdrop {position: relative;}

В моем случае причиной был boostrap.min.css:), как только я исключил его из моего html файла в качестве ссылки, диалог, показанный в forn модального оттенка:)

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

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

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

Это сработало для меня:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

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

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

У меня была такая же проблема, а также проверить ответ Мухда.

Но мои модальные потребности остались, верхний атрибут, поэтому просто измените фиксированную позицию на абсолютную и она сработала.

.modal {
    position: absolute;
}

Как и Давиде Лориглиола, я исправил ее, запустив z-индекс:   .modal-backdrop {z-index: -999999; }

К сожалению, С. О. запрещает мне комментировать или голосовать за него, поэтому я вынужден сказать это здесь в еще одном решении.

Такое поведение иногда возникает, когда есть незакрытый тег, в особенности незакрытый </div>. Вы можете просмотреть, где находится ваш модальный модуль, и убедиться, что все метки закрыты правильно или лучше, но перемещайте div modal ближе к нижней части страницы, непосредственно перед тегом </body>

Попробуйте это https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.0

Bootstrap Modal 3.3.0 создает модальный фон внутри основного элемента, а ранее он добавляется к элементу body.

Надеюсь, что это поможет.

попробуйте перезаписать значение класса .modal-open overflow из скрытого в видимое.

.modal-open {
    overflow: visible;
}

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

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

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

Я просто удалил позицию: фиксированный стиль из файла _modal.scss, и, похоже, он мне подходит. У меня все еще есть фон, и он работает как ожидалось.

// Modal background
.modal-backdrop {
  /* commented out position: fixed - bug fix */
  //position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade {
    opacity: 0;
  }

Престижность Рику Штролу за руководство: https://weblog.west-wind.com/posts/2016/Sep/14/Bootstrap-Modal-Dialog-showing-under-Modal-Background

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

в моем случае я включил этот:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

и еще один офлайн, который у меня уже есть на моем ноутбуке.

function addclassName(){
    setTimeout(function(){
        var c = document.querySelectorAll(".modal-backdrop");
        for (var i = 0; i < c.length; i++) {
            c[i].style.zIndex =  1040 + i * 20  ;
        }
        var d = document.querySelectorAll(".modal.fade");
        for(var i = 0; i<d.length; i++){
            d[i].style.zIndex = 1050 + i * 20;
        }
    }, 10);
}

У меня возникла такая проблема на Iphone и Ipad с использованием Sharepoint 2013 Модальные бутстрапы сохраняют проблемы z-index с фоном.

Я просто использую это на JS:

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

ОСТОРОЖНО ПРИ ПРИЛОЖЕНИИ К ТЕЛО!

Это определенно получит этот модал из-за фона:

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

Тем не менее, это добавляет еще один модальный к телу каждый раз, когда вы его открываете, что может вызвать головную боль при добавлении элементов управления, таких как gridviews с изменениями и обновлениями в панелях обновления, модальным. Поэтому вы можете удалить его, когда модальная функция закрывается:

Например:

$(document).on('hidden.bs.modal', function () {
        $('.modal').remove();
    });

удалит добавленный модальный. (конечно, это пример, и вы можете захотеть использовать другое имя класса, которое вы добавили в модальный).

И как уже сказано другими; вы можете просто отключить обратную передачу от модального (data-backdrop = "false" ), или если вы не можете жить без потемнения экрана, вы можете отрегулировать класс .modal-backdrop css (либо увеличить z-индекс).

Вы можете сделать обходной путь, но это приведет к исчезновению всех страниц. модальное будет всплывать, как всплывающие окна fb. После открытия модальной попытки

 $('.modal-backdrop').removeClass('modal-backdrop');

Удалить фоновый фон заднего плана, который установлен на черный в вашем загрузочном CSS

См. мой:

.modal-backdrop {
    position: fixed; /*---- commented and it shows */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    /*background-color: #000000; */
}

а затем добавьте этот цвет фона и непрозрачность o.5. см. мой:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030; 
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;

}

ПРИМЕЧАНИЕ. Хотя эти изменения были внесены в boostp css, я использовал angular -strap, и я не загружал или не использовал ng-animate css

Я обнаружил, что добавив тег встроенного стиля для установки "display: none", эта проблема была предотвращена. Позиция кода не имела никакого эффекта.

Добавьте это в свою таблицу стилей:

.modal-backdrop {
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0 !important;
}