Показать сообщение отдельно
  #7 (permalink)  
Старый 22.03.2022, 21:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

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>

Последний раз редактировалось рони, 22.03.2022 в 21:52.
Ответить с цитированием