Модификация Bootstrap, отображаемая в фоновом режиме

Я использовал код для моего модального прямо из примера Bootstrap и включил только bootstrap.js(а не bootstrap-modal.js). Тем не менее, мой модальный появляется под серым затуханием (фон) и не редактируется.

Вот как это выглядит:

modal hiding behind backdrop

См. эту скрипту для одного способа воспроизвести эту проблему. Основная структура этого кода такова:

<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>.
  • В качестве альтернативы вы можете удалить свойства position: CSS от модальных и предков до тех пор, пока проблема не исчезнет. Это может изменить способ отображения страницы и функций.

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

Также убедитесь, что версии 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>

Ответ 5

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

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

Ответ 6

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

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

Ответ 7

Решение, предоставляемое @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');
});

Ответ 8

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

Ответ 9

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

Ответ 11

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

#myModal {
    z-index: 1500;
}

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

По оригинальному вопросу:

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

Ответ 12

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

Ответ 13

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

Ответ 14

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

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

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

Ответ 15

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

data-backdrop="false"

Ответ 16

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

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

Ответ 17

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

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

.modal {
    z-index: 1101;
}

Ответ 18

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

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

Ответ 19

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

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

Ответ 20

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

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

Ответ 21

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

Ответ 22

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

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

Ответ 23

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

.modal-backdrop {
    display:none;
}

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

Ответ 24

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

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

Ответ 25

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

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

Ответ 26

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

Ответ 27

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

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

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

Ответ 28

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

Ответ 29

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

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

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

.modal-backdrop {position: relative;}

Ответ 30

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

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