Как реализовать множество модальных окон на странице?

Question

[Mykola Ivashchuk]

Суть: есть список учеников на странице, по клику на каждом появляетсья одинаковое модальное окно с формой и другим контентом внутри.
На данный момент я просто генерирую используя Blade шаблон для каждого ученика генерирую модалку с его данными. Когда много пользователей на странице - начинает лагать, т.к. много html.

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

Answer 1

[lnked]

Используйте шаблон вот пример

В html должен быть только этот шаблон

<template id="tmpl-popup-student">
    <div class="popup" id="popup_student" aria-hidden="true" tabindex="-1">
        <button class="popup__close j-popup-close" aria-label="Закрыть"></button>

        {{#if title}}
        <header class="popup__header popup__header_simple">
            {{title}}
        </header>
        {{/if}}

        <div class="student">
            {{#if student.name}}
            <div class="student__name">
                {{student.name}}
            </div>
            {{/if}}

            {{#if student.rate}}
            <div class="student__rate">
                {{student.rate}}
            </div>
            {{/if}}
        </div>
    </div>
</template>

далее при клике на модалку делаете запрос на сервер получаете данные студента и показываете модалку с полученными данными

для шаблонов использую template7

моя функция рендера

((d) => {
  window.template = (id, data, precompile) => {
    if (typeof precompile === 'undefined') {
      precompile = false;
    }

    if (d.getElementById(id) !== null) {
      const pattern = d.getElementById(id).innerHTML;

      if (precompile) {
        if (!window.precompiledT7) {
          window.precompiledT7 = Template7.compile(pattern);
        }

        return window.precompiledT7(data || {});
      }

      return Template7.compile(pattern)(data || {});
    }

    return '';
  };
})(document);

вызывается так

var data = {
  title: 'О студенте',
  student: {
    name: 'Иванов Иван',
    rate: '4.5'
  }
}

template('tmpl-popup-student', data)

Comments

[Mykola Ivashchuk]

вопрос - функция рендера - это к чему ? Мельком глянул template7 - штука крутая, то что нужно но там в примере по другому компилируется шаблон

[lnked]

писал ее для удобного вызова,
вроде этого

$popup = $(template('tmpl-popup-student', data));
$popup.addClass('temp');

$('body').append($popup);

это универсальная функция, возможно вам она не понадобится

Answer 2

[Brake Made]

js вам в помощь :)
создаете одно модальное окно как шаблон , а потом подтягиваете данные с помощью js