Показать сообщение отдельно
  #1 (permalink)  
Старый 21.03.2022, 23:56
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 110

Bootstrap v5.1 - Как закрыть и открыть модельное окно
Всем привет, столкнулся с ни понимаем новой версии в Bootstrap при работе с модалными окнами

Суть задачи такая
Открывается окошко типа аторизации и там есть кнопка забыл пароль и при ее нажатии надо закрыть текущее окно и открыть новое


В старой версии Bootstrap v4 я писал так
function modal_close_open(close,open) {
    $('#'+close).modal('hide');
    sleep(1000);
    $('#'+open).modal('show');
}

И все работало на ура без проблем но вот в новой версии они что то намудрили ну покрайне мере для меня уже 2 день сижу и не могу не решить ни информацию найти рабочую


Есть несколько вариантов что я нашел и они не подошли:

1 -
function modal_close_open(close,open) {
var myModal = document.getElementById(close)
myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // останавливает отображение модального окна
  }
})
}


2-
function modal_close_open(close,open) {
var myModal = new bootstrap.Modal.getOrCreateInstance(document.getElementById(close));
modal.hide();
}


3-
function modal_close_open(close,open) {
var myModalEl = document.getElementById(close)
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  myModalEl.hide();
})
}


И постоянно выходит в консоли одна и таже ошибка, вот варианты:
script.js Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

или
Uncaught TypeError: Cannot read properties of undefined (reading 'classList')



Может есть какоето решение или рабочий код ??
Или может мне надо вызывать через JS чтоб все это работало
Саму документацию читал несколько раз и тоже не нашел решения, получаю только ошибку в консоли
https://bootstrap-4.ru/docs/5.1/getting-started/javascript/#programmatic-api
https://bootstrap-4.ru/docs/5.1/components/modal/
Ответить с цитированием