Форум

biryukovm · #1 (**permalink**) 21.03.2022, 23:56

Всем привет, столкнулся с ни понимаем новой версии в 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/

рони · #2 (**permalink**) 22.03.2022, 08:15

biryukovm,
обработку события ставить на элемент, а открывать или закрывать это работа с объектом Bootstrap, пример ниже.
первое окно запускается автоматом, второе по кнопке Close через 1 секунду.

Пример: Modal bootstrap

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.js"></script>
  <script>
$(function() {
let modal = document.getElementById('myModal');
let myModal = new bootstrap.Modal(modal);
let modalTwo = document.getElementById('exampleModal');
let exampleModal = new bootstrap.Modal(modalTwo);
myModal.show();
modal.addEventListener('hidden.bs.modal',function() {
window.setTimeout(_ => exampleModal.show(), 1000)
})
});
  </script>
</head>
<body>
<div id="myModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div id="exampleModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">modalTwo title 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"  ></button>
      </div>
      <div class="modal-body">
        <p>modalTwo body text goes here. 2</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

biryukovm · #3 (**permalink**) 22.03.2022, 19:41

Сообщение от рони

второе по кнопке Close через 1 секунду

Это не то, вот сами Вы как представляете открываете вы окно для авторизации и решили закрыть и тут на вылезет 2 окно чтоб сбросить пароль как то странно хотя клиент просто закрыл это окошко

мысль кода понял но это не совсем то, спасибо

рони · #4 (**permalink**) 22.03.2022, 19:58

Сообщение от biryukovm

Это не то, вот сами Вы как представляете открываете вы окно для авторизации и решили закрыть и тут на вылезет 2 окно чтоб сбросить пароль как то странно хотя клиент просто закрыл это окошко

мне сложно понять ход ваших мыслей .
а если по делу, код строки 16 перенесите на нужную вам кнопку.

будет что-то типа

Пример: Modal bootstrap

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.js"></script>
  <script>
$(function() {
let modal = document.getElementById('myModal');
let myModal = new bootstrap.Modal(modal);
let modalTwo = document.getElementById('exampleModal');
let exampleModal = new bootstrap.Modal(modalTwo);
myModal.show();
let button = document.querySelector('.sclerosis');

button.addEventListener('click',function() {
myModal.hide();
window.setTimeout(_ => exampleModal.show(), 1000)
})
});
  </script>
</head>
<body>
<div id="myModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary sclerosis"  >забыл пароль</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div id="exampleModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">форма восстановления пароля</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"  ></button>
      </div>
      <div class="modal-body">
        <p>modalTwo body text goes here. 2</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

biryukovm · #5 (**permalink**) 22.03.2022, 20:38

Сообщение от рони

а если по делу, код строки 16 перенесите на нужную вам кнопку.

Супер то что нужно пошел тестить

biryukovm · #6 (**permalink**) 22.03.2022, 21:00

Сообщение от рони

мне сложно понять ход ваших мыслей

Рони код супер работает, но я пытаюсь переделать для себя его универсально а не только под это модальное окно и не получается может подскажите

суть такая в модальном окне есть кнопка

<a href="javascript:void(0)" class="bottom_zabil" onclick="modal_close_open('modal_vhod','modal_pass_smena')">Забыли пароль</a>

и по нажатию я начинаю выполнять в функции задачу

function modal_close_open(close,open) {
    let modal = document.getElementById(close);
    let myModal = new bootstrap.Modal(modal);
    myModal.hide();

    let modalTwo = document.getElementById(open);
    let exampleModal = new bootstrap.Modal(modalTwo);

    window.setTimeout(_ => exampleModal.show(), 1000)
}

и тут опять не получается он ругается на строку
let myModal = new bootstrap.Modal(modal);

с ошибкой

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

рони · #7 (**permalink**) 22.03.2022, 21:45

biryukovm,
так как функция будет использована после всех инициализаций bootstrap, то создавать обьекты модальных окон не нужно, надо только вытащить ссылку на них(или создать обьект modal, если окно никогда не открывалось) с помощью getOrCreateInstance.

Пример: Modal bootstrap

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.js"></script>
  <script>
function modal_close_open(close,open) {
    let modal = document.getElementById(close);
    let myModal = bootstrap.Modal.getOrCreateInstance(modal);
    myModal.hide();
    let modalTwo = document.getElementById(open);
    let exampleModal = bootstrap.Modal.getOrCreateInstance(modalTwo);
    window.setTimeout(_ => exampleModal.show(), 3000)
}

  </script>
</head>
<body>
<button type="button" data-bs-toggle="modal" data-bs-target="#modal_vhod">Запустить модальное окно</button>
<div id="modal_vhod" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <a href="javascript:void(0)" class="bottom_zabil" onclick="modal_close_open('modal_vhod','modal_pass_smena')">Забыли пароль</a>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div id="modal_pass_smena" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">форма восстановления пароля</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"  ></button>
      </div>
      <div class="modal-body">
        <p>modalTwo body text goes here. 2</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript