Bootstrap modal не отображается

Ответ 1

Я выяснил причину.

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

У меня был один экземпляр "fade", определенный в случайном файле css, и это то, что останавливало его отображение, поскольку оно было переопределяющим бутстрапом. Как только я удалил ссылку, все было в порядке.

Ответ 2

Если вы обновили Bootstrap 2.3.2 до Bootstrap 3, вам нужно удалить класс 'hide' из любого из ваших модальных div.

Ответ 3

У меня был мой модальный <div> внутри my <li> .... не хорошо.

Наружные работы отлично: -)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">....</h4>
            </div>

            <div class="modal-body">
                <p>....</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">OK</a>
            </div>
        </div>
    </div>
</div>
<li>
    .....
</li>

Ответ 4

Если вы используете angular и пытаетесь создать директиву, в которой есть пользовательский модальный код, модальный фон покажет, но сам модальный не будет, если вы не установите replace: true в своей директиве.

Typescript Директива:

export class myModalDirective implements ng.IDirective {
    static Register = () => {
        angular.module('app').directive('myModal', () => { return new myModalDirective () });
    }
    templateUrl = 'mymodal.html'    
restrict = 'E';
    replace = true;
    scope = {
        show: '='
    }
    link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        var vm = this;
        scope.$watch(function () { return scope.show; }, function (vis) {
            if (vis) {
                $(element).modal('show');
            } else {
                $(element).modal('hide');
            }
        });

    }
    constructor () {
    }
}

Модальный HTML

<div class="modal fade" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                </div>
        </div>
    </div>
</div>

Ответ 5

Измените свой код на что-то вроде этого,

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a class="btn" data-target="#myModel" role="button" data-toggle="modal">Launch demo modal</a>

Ответ 6

У меня была та же проблема, и я понял, что у моего <button> было type="submit" когда Bootstrap заявляет, что это должно быть type="button"

Ответ 7

Как и у Паулы, у меня была та же проблема, мой модал не показывался, и я понял, что моя кнопка была в теге <form>...:

<button class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</button>

Я просто заменил <button> на <a>, и мой модал работал хорошо

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</a>

Ответ 8

Если вы используете Bootstrap 4, это может произойти из-за ".fade: not (.show) {opacity: 0}" в Bootstrap css и ваш модал не имеет класса 'show'. И причина, по которой у него нет класса 'show', может быть из-за того, что ваша страница не загружает файлы JQuery, Popper и Bootstrap Javascript.

(Bootstrap Javascript автоматически добавит класс 'show' в ваш диалог.)

Ссылка: https://getbootstrap.com/docs/4.3/getting-started/introduction/

Ответ 9

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

С моей конфигурацией у меня был существующий код jQuery, связанный с тем же селектором, запускающим модальный режим. После запуска процесса удаления все, что мне нужно было сделать, это закомментировать/удалить e.stopPropagation() в моем существующем скрипте.

Ответ 10

Чтобы мой модал отображался при вызове .modal('show')

Я изменился:

modal.on('loaded.bs.modal', function() 

чтобы:

modal.on('shown.bs.modal', function() {

Ответ 11

Просто чтобы уточнить ответ @jfdimark. Скорее всего, это вызвано тем же именем класса CSS где-то в загруженном CSS. Поэтому вместо того, чтобы определять модальный класс как "модальное затухание", измените его на "модальное затухание" и попробуйте снова.

Ответ 12

1. Проверьте все файлы js, порядок следует сохранить.
2. Заказ должен быть сохранен как

    -> jquery.min.js
    -> bootstrap.min.js
    -> any external js files

Ответ 13

Иногда и другие конфликты CSS priority issue. - CSS priority issue.

чтобы проверить, перейдите в ваш модальный класс затухания в браузере, а затем проверьте, есть ли какой-либо пользовательский файл сверху. например .fade:not(.show) где он использовал свою собственную информацию, а не загрузчик. если вы найдете то вы должны изменить его в соответствии с вашими потребностями. Надеюсь это поможет.

Ответ 14

Я только что наткнулся на эту проблему и нашел собственный текст текста таблицы стилей CSS: #ffffff погружает текстовое содержимое, потому что цвет фона модели такой же! то есть .model-content {background-color: #ffffff;} Обязательно переопределите его в своей таблице стилей, добавив следующие .modal-content {color: # 646464! important;}
Может быть, это помогает.

Ответ 15

Вы должны импортировать jquery и bootstrap.min.js.

Добавьте это к angular-cli:

"scripts": ["../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"]

убедитесь, что у вас есть свои папки.