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

Передача и вывод data-атрибутов в модальное окно Верстка
Часто чтобы не создавать множество однотипных модальных окон, можно создать одно универсальное и передавать в него нужные data-атрибуты.

Допустим у нас есть landing page сверстанный на основе bootstrap 4 (с использованием jquery 2 или 3) с какими-товарами, пусть будут букеты цветов. Блок: листинг товаров, мини карточки с названием, картинкой, ценой и кнопкой заказа — которая вызывает модальное окно. К примеру у нас 10 букетов, не создавать же для них 10 отдельных модальных окон.

Чтобы не чего особо не выдумывать, возьмем разметку от bootstrap 4:

стандартная кнопка вызова модального окна:

<button type="button" class="btn btn-primary" data-toggle="modal" data-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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

смотри документацию по bootstrap 4 Modal.

ну и соответственно какая-нибудь простенькая форма.

Теперь давайте передадим при помощи кнопки 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:

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

      $(".tovarimg").append('<img class="img-fluid" src="' + imgtovara + '" alt="..." />');
      $(".tovarinfo").append('<p class="h3">' + nametitle + '</h1>');
      $(".tovarinfo").append('<p><strong>Цена</strong>:' + pricetovar + '</p>');
      $("#hide1").attr('value', nametitle);
      $("#hide2").attr('value', pricetovar);
    })
});

результат вызова модального окна

СМОТРЕТЬ DEMO
СКАЧАТЬ DEMO

Источник
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 2 оценки, среднее 5 из 5 )
Создание, поисковая оптимизация, продвижение и монетизация сайтов. Инструменты для веб-разработчиков, CMS сборки.
Добавить комментарий

  1. Илгиз

    В коде есть ошибка. Когда заказываешь первый товар все работает отлично, но если закрываешь первое модальное окно и открываешь второе выводиться значение первого и второго товара, а если закрываешь второе модальное окно и открываешь третье, то выводиться значение превого, второго и третьего товара. Подскажите как исправить код. Наверно вы не заметили в ходе разработки

    Ответить
    1. Алексей автор

      Выводить не так: $(".tovarinfo").append('

      ' + nametitle + '');

      , а вот так $(".tovarinfo p.h3").text(tovarinfo); и в html разметку поставить p с классом h3, смотрите первоисточник (он указан в самом низу).

      Ответить