Bootstrap Модальные всплывающие окна и складные списки не появляются в производстве - PullRequest
0 голосов
/ 22 апреля 2019

Это странно ...

У меня есть складные элементы управления, такие как:

<button class="btn btn-primary" data-toggle="collapse" data-target="#meals">Meals</button>
<div id="meals" class="collapse">...</div>

И у меня есть модальные диалоги, такие как:

<a href="#" data-toggle="modal" data-target="#editModal20190401" class="crud-edit"><span class="glyphicon glyphicon-pencil"></span></a>
<div id="editModal20190401" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

И оба отлично работают в отладочной сборке. Но они оба терпят неудачу в каждом случае (и, по-видимому, в каждом браузере) при сборке релиза на живом сервере. Для свертываемых элементов управления вы можете видеть, как они раскрываются или разворачиваются (например, анимация работает нормально), но как только она полностью развернута, она просто вылетает из существования, как ее отображение: нет. Для модальных диалогов они явно существуют, потому что они блокируют ввод для остальной части страницы (и я могу использовать Inspect для проверки того, что элементы находятся там, где они должны быть), но они всегда невидимы.

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

Я использую ASP.NET Core 2.1 с Bootstrap 4-1.

Edit: Вот ссылка на юнит-тест для проблемы с модальным диалогом: https://lisa3dev.slamgmt.com/TestPopup

Опять же, эта страница отлично работает в локальной сборке разработки.

1 Ответ

1 голос
/ 26 апреля 2019

Чувак, этот сайт беспорядок. Мне удалось получить к нему доступ через VPN.

В него добавлено несколько версий Bootstrap CSS и JS. Я бы попросил вас исправить все эти конфликты.

Но если вы не можете, или хотите временное исправление, исправляя остальное.

Вы можете добавить show класс к вашему модальному

<div id="editModal20190401" class="modal fade show" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

Примечание: это обходной путь для вашего сценария. Но я настоятельно рекомендую исправить все эти конфликты и перейти к определенной версии Bootstrap.

Обновление: добавьте эту таблицу стилей для обновления до bootstrap 4:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

также добавьте все эти сценарии:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Убедитесь, что никаких других bootstrap или jquery или popper версий не добавлено

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...