Отсутствует модальный фон Bootstrap 3

модальный Bootstrap 3 обычно делает страницу темнее, чтобы выделить сам модальный и обозначить, что пользовательский интерфейс страницы отключен во время показа модального.

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

Я не могу понять, почему мой модальный фон отсутствует. Я проверил свой HTML, чтобы убедиться, что нет отсутствующих тегов. Я также использую datatables, tabdrop и d3 на своей странице, но попытался удалить их (JS и CSS) один за другим, чтобы решить проблему безрезультатно. Что еще я должен проверить?

вот страница:http://suite.swiftdigital.com.au/scripts/marcus/modal/event.htm

нажмите на зеленую кнопку " Новый участник" кнопка, чтобы увидеть один из модалов. Другой-кнопка "Редактировать вид" в середине экрана.

6
css datatables html twitter-bootstrap-3

3 ответов

Это была не проблема CSS или HTML в конце концов. Получение последнего файла Bootstrap JS исправило его. Я был на 3.2.0 и обновлен до 3.3.1. Ха!. (Вам нужно убедиться, что версии загрузочного JS и CSS совпадают.)

7

добавьте это в свой css:

.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.7;
filter: alpha(opacity=70);
background: #fff;
}

Если вы просто используете загрузочный CSS. это сделает backgroun белым с непрозрачностью 70%.

или

добавьте это в свой css:

    .fade.in {
opacity: .75;
background-color: #000;
}

это потому, что прямо сейчас, ваш .исчезают.в классе is не имеет прикрепленного цвета фона.

1

сравнение код на сайте обновилась загрузочный код выглядит так:

<div class="modal-dialog" style="width: 600px">
        <div class="modal-content">
            <div class="modal-header">...
                rest of the module

загрузочный код имеет следующий код:

<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; padding-right: 17px;">
    <div class="modal-backdrop fade in" style="height: 995px;"></div>
    <div class="modal-dialog">
      <div class="modal-content">

похоже, вам не хватает этой линии ниже. Попробуйте добавить его под свой modal-dialog DIV

<div class="modal-backdrop fade in" style="height: 995px;"></div>
0