Блог

Главная - Вопросы по программированию - Проблема с модальным отображением начальной загрузки v5

Проблема с модальным отображением начальной загрузки v5

#javascript #jquery #bootstrap-5

Вопрос:

Я решил продолжить и обновить свой сайт до последней версии Bootstrap, версии 5.0, и у меня возникли трудности с запуском модалов. В руководстве по миграции ничего не говорилось о нарушении модальностей, и раньше мой сайт работал отлично. Мой код использует javascript/jQuery для запуска модального кода после загрузки текста ajax. Часть ajax по — прежнему работает нормально, но она не запускает модал после его извлечения. Я использую новейшие bootstrap.bundle.min.js.

 $( document ).ready(function() {
$('.hourModal').click(function(){
    var obj_id = $(this).data('id');
    $.ajax({
        url: 'ajax-multi.php',
        type: 'POST',
        data: {obj_id: obj_id,role:'some_role'},
        //dataType: 'html',
        success: function(response){ 
            $('.modal-body').html(response);
            //$('#hourModal').modal('show'); //Old way that worked great
            var hourModal = new bootstrap.Modal(document.getElementById('hourModal'));
            hourModal.show(); // New way I tried from the Bootstrap documentation
        }
    });
});
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy 8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

<!-- Button -->
<button type="button" class="btn btn-secondary btn-sm py-0 me-1 hourModal" data-id="1">Blocks</button>

<!-- Modal -->
<div class="modal fade" id="hourModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Object Times</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Ошибка, которую я получаю: Неучтенная ошибка типа: ФОН: Опция «Корневой элемент» предоставила тип «null», но ожидаемый тип «элемент».

Любая помощь будет очень признательна!

ОБНОВЛЕНИЕ: Как описано ниже, мне пришлось переехать bootstrap.min.js до конца страницы, после </body> и оставьте там, куда я позвоню jquery.min.js вверху в заголовке. У кого-нибудь есть идеи, почему это должно быть сделано именно так?

Комментарии:

1. Вы смешиваете php и JS, что никогда не бывает хорошей идеей.

Ответ №1:

Двигайте <script> с загрузкой в конце <body> . Это исправило мою модальную проблему с загрузкой 5.

Ответ №2:

Эта проблема исправлена в доступной в настоящее время версии 5.0.1

Ответ №3:

У меня была та же проблема. Я позвонил jquery.js и bootstrap.js в конце html и перед /телом, и это работало правильно.

Ответ №4:

Обновить:

Исправлено в начальной версии 5.0.1

У меня была та же проблема. Единственное отличие, для создания которого я использую Webpack.

Если вы хотите загрузить свои сценарии из head раздела, вы можете попробовать добавить async опцию.

Это устранило проблему для меня.

 <script src="..." async="async"></script>

Ответ №5:

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

Метки: