Вывод data-атрибутов в модальном окне

Что такое атрибуты data и для чего их использовать?

Атрибуты data — это специальные атрибуты HTML, которые позволяют хранить пользовательские данные непосредственно в элементах. Они могут быть использованы для передачи информации, которая не видна пользователю, но может быть использована в JavaScript или CSS.

Часто чтобы не создавать множество однотипных модальных окон, можно создать одно универсальное и передавать в него нужные data-атрибуты. Допустим у нас есть landing page с какими-товарами, пусть будут букеты цветов. Блок: листинг товаров, мини карточки с названием, картинкой, ценой и кнопкой заказа — которая вызывает модальное окно.

В данном случае можно создать 3 отдельных модальных окна со своими данными и привязать их к разным кнопкам (товарам) — таким путем скорее всего пошел бы начинающий верстальщик, а данный путь очень сомнительный. Т.к. во первых товаров может стать больше (или их сразу десятки) и плодить под каждый товар отдельные модалки точно не выход. Поэтому ниже рассмотрим как обойтись одним окном.

Пример использования атрибутов data

HTML

Чтобы особо не углубляться в верстку возьмем за основу готовую разметку компонента MODAL (Live demo) от популярного фреймворка Bootstrap 4 (с использованием jquery) или бутстрап 5 (на ванильном JS).

Html разметки у них почти идентичны:

<!-- кнопка вызова модального окна -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- разметка самого модального окна -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </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>

Здесь уже используются атрибуты данных, но мы никак к ним не будем привязываться. И возьмем какую-нибудь простенькую форму бутстрап 4 или 5.

Теперь давайте передадим при помощи кнопки 3 дата атрибута:

• название товара или заголовка для модального окна (data-nametitle)
• изображение товара (data-imgtovara).
• цену товара (data-pricetovar).

Следовательно кнопка вызова модального окна примет следующий вид:

<button type="button" class="btn btn-primary" data-nametitle="Букет «Фруктовый Коктейль»" data-imgtovara="images/buket/2.jpg" data-pricetovar="1700 р." data-toggle="modal" data-target="#exampleModal">Заказать</button>

А полная разметка модального окна примет примерно такой вид

<!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Быстрый заказ цветов</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-sm-3 tovarimg"></div>
                <div class="col-sm-9 tovarinfo"></div>
            </div>
            <hr>
            <form>
              <div class="form-group">
                <label for="exampleFormControlInput1">Ваше имя</label>
                <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Например: Иван">
              </div>
              <div class="form-group">
                <label for="exampleFormControlInput2">Ваш телефон</label>
                <input type="text" class="form-control" id="exampleFormControlInput2" placeholder="Например: +797757775342">
              </div>
              <div class="form-group">
                <label for="exampleFormControlTextarea1">Примечание</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="2" placeholder="Ваш адрес или примечание"></textarea>
              </div>
              <input id="hide1" type="hidden" value="">
              <input id="hide2" type="hidden" value="">
              <button type="submit" class="btn btn-primary w-100">Заказать</button>
            </form>
          </div>
        </div>
      </div>
    </div>

Будем передавать данные в блоки с классами tovarimg (изображение вместе с html разметкой), tovarinfo (название и цену товара с html разметкой). И в скрытые input с id hide1 (передадим туда название) и hide2 (передадим туда цену).

Для этого добавим немного js:

Vanilla JS

document.addEventListener("DOMContentLoaded", function() {
  const btns = document.querySelectorAll(".btn");

  btns.forEach(function(btn) {
    btn.addEventListener("click", function() {
      const imgtovara = this.getAttribute('data-imgtovara');
      const nametitle = this.getAttribute('data-nametitle');
      const pricetovar = this.getAttribute('data-pricetovar');

      // Очищаем существующие данные перед добавлением новых
      document.querySelector(".tovarimg").innerHTML = "";
      document.querySelector(".tovarinfo").innerHTML = "";

      // Добавляем новые данные в модальное окно
      const img = document.createElement("img");
      img.className = "img-fluid";
      img.src = imgtovara;
      img.alt = "...";
      document.querySelector(".tovarimg").appendChild(img);

      const title = document.createElement("p");
      title.className = "h3";
      title.textContent = nametitle;
      document.querySelector(".tovarinfo").appendChild(title);

      const price = document.createElement("p");
      price.innerHTML = `<strong>Цена:</strong> ${pricetovar}`;
      document.querySelector(".tovarinfo").appendChild(price);

      document.querySelector("#hide1").value = nametitle;
      document.querySelector("#hide2").value = pricetovar;
    });
  });
});

jQuery

$(function() {
  $(".btn").click(function() {
    var imgtovara = $(this).attr('data-imgtovara');
    var nametitle = $(this).attr('data-nametitle');
    var pricetovar = $(this).attr('data-pricetovar');

    // Очищаем существующие данные перед добавлением новых
    $(".tovarimg").empty();
    $(".tovarinfo").empty();

    // Добавляем новые данные в модальное окно
    $(".tovarimg").append('<img class="img-fluid" src="' + imgtovara + '" alt="..." />');
    $(".tovarinfo").append('<p class="h3">' + nametitle + '</p>');
    $(".tovarinfo").append('<p><strong>Цена:</strong> ' + pricetovar + '</p>');
    $("#hide1").attr('value', nametitle);
    $("#hide2").attr('value', pricetovar);
  });
});

Результат

Заключение

Использование атрибутов data позволяет передавать пользовательские данные в модальные окна и обеспечивает более гибкую работу с веб-сайтом. Надеюсь, данная статья поможет вам лучше понять, как работать с data-атрибутами и создавать более интерактивные веб-приложения.