Как передать данные в input с data-product

Question

html

    <div class="container">
        <div class="order_btn">
            <a href="" class="open_modal" data-product="Товар-1" id="product">заказать</a>
        </div>
        <div class="order_btn">
            <a href="" class="open_modal" data-product="Товар-2" id="product">заказать</a>
        </div>
        <div class="order_btn">
            <a href="" class="open_modal" data-product="Товар-3" id="product">заказать</a>
        </div>
    </div>


    
    <div class="modal">
        <div class="container modal_body">
            <form action="" method="POST" class="modal_content">
                <a href="" class="close_modal">&#10006</a>
                <p>Оформить заказ</p>
                <input type="text" placeholder="Ваше имя">
                <input type="tel" placeholder="Ваш телефон">
                <input type="text" readonly="">
                <button class="btn_buy">Отправить</button>
            </form>
        </div>

    </div>

Вызов модального окна на JS:

let modal = document.querySelector('.modal');
let modalBody = document.querySelector('.modal_body');
let openModal = document.querySelectorAll('.open_modal');
let closeModal = document.querySelector('.close_modal');



openModal.forEach(function(button) {
    button.addEventListener('click', function(event) {
        event.preventDefault();
        modal.classList.add('active');
    })
});

closeModal.addEventListener('click', function() {
    event.preventDefault();
    modal.classList.remove('active');
});

Модальное окно открывается без проблем. Только вот не получается в input id="product" присвоить данные с тега а data-product. И не получается закрытие модального вне граница модального окна. Кто сможет помочь? Буду благодарен. А то уже который день застрял на этом...(((

Answer 1

Пример

let modal = document.querySelector(".modal");
let modalOverlay = modal.querySelector(".modal_overlay")
let modalProductField = modal.querySelector(".product-field");

function openModal(e) {
  e.preventDefault();
  if (e.target.matches(".open_modal")) {
    modal.classList.add("active");
    modalProductField.value = e.target.dataset.product;
  }
}

function closeModal(e) {
  e.preventDefault();
  if (e.target.matches(".close_modal")) {
    modal.classList.remove("active");
  }
}

function closeModalOut(e) {
  modal.classList.remove("active");
}

window.addEventListener("click", openModal);
window.addEventListener("click", closeModal);
modalOverlay.addEventListener("click", closeModalOut);

.modal,
.modal_overlay {
  display: none;
}

.modal_overlay {
  background-color: rgba(0, 0, 0, .78);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal.active {
  border: 1px solid #00f;
}

.modal.active,
.modal.active .modal_overlay {
  display: block;
}

.modal.active .modal_body {
  position: relative;
  z-index: 999;
  background-color: #fff;
}

<div class="container">
  <div class="order_btn">
    <a href="" class="open_modal" data-product="Товар-1" id="product">заказать</a>
  </div>
  <div class="order_btn">
    <a href="" class="open_modal" data-product="Товар-2" id="product">заказать</a>
  </div>
  <div class="order_btn">
    <a href="" class="open_modal" data-product="Товар-3" id="product">заказать</a>
  </div>
</div>

<div class="modal">
  <div class="modal_overlay"></div>
  <div class="container modal_body">
    <form action="" method="POST" class="modal_content">
      <a href="" class="close_modal">&#10006</a>
      <p>Оформить заказ</p>
      <input type="text" placeholder="Ваше имя">
      <input type="tel" placeholder="Ваш телефон">
      <input class="product-field" type="text" readonly="">
      <button class="btn_buy">Отправить</button>
    </form>
  </div>

</div>

БЛОГ НА HUSL

Как передать данные в input с data-product

Ответы (1 шт):