Несколько модальных окон на одном JS

Question

Несколько модальных окон на одном JS

Рейтинг: 0Ответов: 1Опубликовано: 17.08.2023

Как при помощи одного скрипта сделать так, чтобы корректно работали 2 разных модальных окна?

Вот такой вот код:

let open_modal = document.querySelectorAll('.open_modal');
let close_modal = document.getElementById('close_modal');
let modal = document.getElementById('modal');
let body = document.getElementsByTagName('body')[0];
for (let i = 0; i < open_modal.length; i++) {
  open_modal[i].onclick = function() { // клик на открытие
    modal.classList.add('modal_vis'); // добавляем видимость окна
    modal.classList.remove('bounceOutDown'); // удаляем эффект закрытия
    body.classList.add('body_block'); // убираем прокрутку
  };
}
close_modal.onclick = function() { // клик на закрытие
  modal.classList.add('bounceOutDown'); // добавляем эффект закрытия
  window.setTimeout(function() { // удаляем окно через полсекунды (чтобы увидеть эффект закрытия).
    modal.classList.remove('modal_vis');
    body.classList.remove('body_block'); // возвращаем прокрутку
  }, 500);
};

.modal {
  display: none;
  background: #337AB7;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
}

.modal_vis {
  display: block;
}

.body_block {
  overflow: hidden;
  margin-right: 17px;
}

#close_modal {
  color: #BFE2FF;
  font-size: 40px;
  font-weight: bold;
  font-family: Times, sans-serif;
  border-radius: 50%;
  border: 4px solid #BFE2FF;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 20px;
  cursor: pointer;
  position: absolute;
  right: 0;
  transform: rotate(45deg);
  transition: all 0.6s;
  box-sizing: content-box;
}

#close_modal:hover {
  color: #FFF;
  transform: rotate(135deg);
}

.modal_txt {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
  background: #FFF;
  padding: 30px;
  margin: 100px auto;
  max-width: 800px;
}

<a class="open_modal" href="#open">Открыть окно 1</a>
<div id="modal" class="modal bounceIn">
  <div id="close_modal">+</div>
  <div class="modal_txt">Текст в модальном окне1</div>
</div>
<a class="open_modal" href="#open">Открыть окно 2</a>
<div id="modal" class="modal bounceIn">
  <div id="close_modal">+</div>
  <div class="modal_txt">Текст в модальном окне2</div>
</div>

javascript html всплывающее-окно

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Как при помощи одного скрипта сделать так, чтобы корректно работали 2 разных модальных окна?

Убрать одинаковые ИДшники... Добавить class... Добавить коллекций и цикл.

Максимально сохранил твой стиль скрипта. Но тут важен порядок следования "открывающих" ссылок и собственно "окон". Он должен быть одинаковый. Если это не соблюдается - можно будет задействовать data-атрибуты для связи ссылок с "окнами".

let open_modal = document.querySelectorAll('.open_modal');
let close_modal = document.querySelectorAll('.close_modal');
let modal = document.querySelectorAll('.modal');
let body = document.getElementsByTagName('body')[0];
for (let i = 0; i < open_modal.length; i++) {
  open_modal[i].onclick = function() { // клик на открытие
    modal[i].classList.add('modal_vis'); // добавляем видимость окна
    modal[i].classList.remove('bounceOutDown'); // удаляем эффект закрытия
    body.classList.add('body_block'); // убираем прокрутку
  };
}
for (let i = 0; i < open_modal.length; i++) {
  close_modal[i].onclick = function() { // клик на закрытие
    modal[i].classList.add('bounceOutDown'); // добавляем эффект закрытия
    window.setTimeout(function() { // удаляем окно через полсекунды (чтобы увидеть эффект закрытия).
      modal[i].classList.remove('modal_vis');
      body.classList.remove('body_block'); // возвращаем прокрутку
    }, 500);
  };
}

.modal {
  display: none;
  background: #337AB7;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
}

.modal_vis {
  display: block;
}

.body_block {
  overflow: hidden;
  margin-right: 17px;
}

.close_modal {
  color: #BFE2FF;
  font-size: 40px;
  font-weight: bold;
  font-family: Times, sans-serif;
  border-radius: 50%;
  border: 4px solid #BFE2FF;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 20px;
  cursor: pointer;
  position: absolute;
  right: 0;
  transform: rotate(45deg);
  transition: all 0.6s;
  box-sizing: content-box;
}

.close_modal:hover {
  color: #FFF;
  transform: rotate(135deg);
}

.modal_txt {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
  background: #FFF;
  padding: 30px;
  margin: 100px auto;
  max-width: 800px;
}

<a class="open_modal" href="#open">Открыть окно 1</a>
<div class="modal bounceIn">
  <div class="close_modal">+</div>
  <div class="modal_txt">Текст в модальном окне1</div>
</div>
<a class="open_modal" href="#open">Открыть окно 2</a>
<div class="modal bounceIn">
  <div class="close_modal">+</div>
  <div class="modal_txt">Текст в модальном окне2</div>
</div>

Несколько модальных окон на одном JS

Ответы