Методы запуска модального окна Bootstrap при загрузке страницы в JavaScript

Чтобы запустить модальное окно Bootstrap при загрузке страницы в JavaScript, вы можете использовать различные методы. Вот несколько подходов:

Метод 1: использование jQuery

$(document).ready(function() {
  $('#myModal').modal('show');
});

В этом методе вы используете функцию $(document).ready(), чтобы убедиться в готовности DOM перед выполнением кода. Код выбирает модальный элемент с идентификатором myModalи вызывает метод modal('show')для отображения модального окна.

Метод 2: стандартный JavaScript

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('myModal').classList.add('show');
});

При таком подходе вы прослушиваете событие DOMContentLoaded, которое срабатывает, когда исходный HTML-документ полностью загружен и проанализирован. Код выбирает модальный элемент с идентификатором myModalи добавляет класс showдля отображения модального элемента.

Метод 3. Использование событий начальной загрузки

document.getElementById('myModal').addEventListener('shown.bs.modal', function() {
  // Modal has been shown
});
$(window).on('load', function() {
  $('#myModal').modal('show');
});

В этом методе вы можете использовать встроенные события Bootstrap. Первая часть добавляет прослушиватель событий к событию shown.bs.modalмодального окна, которое срабатывает, когда модальное окно полностью отображается. Во второй части используется событие $(window).on('load'), чтобы убедиться, что все ресурсы страницы загружены перед отображением модального окна.