Блог

Это странно…

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

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

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

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

Я использую ASP.NET Ядро 2.1 с начальной загрузкой 4-1.

Редактировать: Вот ссылка на модульный тест для решения проблемы с модальным диалогом:https://lisa3dev.slamgmt.com/TestPopup

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

Чувак, этот сайт — беспорядок. Мне удалось получить к нему доступ через 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