Подгрузка модального окна статьи

Привет всем любителям modx! Хочу попросить Вашей помощи или подсказки. Смотрите есть блок со статьями. Их может быть не мерено много. В блоке идёт название статьи картинка и краткое описание. При клике на статью открывается модальное окно с самой статьёй. В ней полный контент, картинки и всё прочее. Нужно сделать так чтобы при нажатии на кнопку показать модальное окно формировалось на лету. Для каждой статьи своё. Используется обычный вывод через pdoResources в чанках. Модальное окно находится в чанке оформления статьи (в блоках которая), но оно не должна подгружаться сразу ко всем, а только после нажатия кнопки. Подскажите пожалуйста :)
Никита
Никита
03 июля 2020, 12:29
modx.pro
1 680

Комментарии: 12

Евгений Webinmd
Евгений Webinmd
03 июля 2020, 14:34
самый простой способ это fancybox

<a data-fancybox data-type="ajax" data-src="{$uri}" data-filter="#ID-content-block" href="javascript:;">
	AJAX content
</a>
в поле data-filter надо вставить css ID с страницы статьи, которые надо подгружать в модалку
    Никита
    Никита
    03 июля 2020, 15:20
    Вы про это fancyapps.com/fancybox/3/?
      Евгений Webinmd
      Евгений Webinmd
      03 июля 2020, 15:21
      да
        Никита
        Никита
        03 июля 2020, 15:25
        data-filter надо вставить css ID с страницы статьи, то есть якорную ссылку? А нельзя [[+id]]?
          Евгений Webinmd
          Евгений Webinmd
          03 июля 2020, 15:30
          data-filter — это именно css id.

          Вот смотри, у статьи шаблон Статья, со своей версткой, вот в верстке нужный контент обрамляется в 
          <div id="for-modal"> </div>
          И вот данные из этого id for-modal и будет подгружаться в модалку. То есть по сути fancybox грузит страницу по ссылке из data-src (например: data-src="[[+uri]]") и чтобы не грузить всю страницу, с шапкой и футером, то указывается только ID блока который надо показать
            Никита
            Никита
            03 июля 2020, 16:24
            Смотри, нет же страницы статьи. Есть чанк оформления общий который выводит их pdoTools, а сама статья открывается через модальное окно на этой же странице. Есть отдельно созданная страница, но её не существует. Она только для вывода pdoTools как отдельных статей. Твой вариант тут поможешь?
            Если такой формат чанка
            div
            Краткое оформление статьи
            Кнопка на которую должно открывается окно
            /div
            div class «скрытое модальное окно»
            Полный контент
            /div
              Евгений Webinmd
              Евгений Webinmd
              03 июля 2020, 16:29
              Смотри, нет же страницы статьи.
              Ну как нет. Ресурс есть в базе, у него скорей всего свой шаблон, просто ты не выводишь ссылку на эту страницу.

              Но если хочешь, можешь и в чанке формировать модальное окно, только надо включать и запрос контента (includeContent=1). Но мне кажется просто не до конца есть понимание как хранятся ресурсы, либо с моей стороны, либо с твоей. А у задачи есть несколько решений, я предложил то что сам когда-то использовал.
                Никита
                Никита
                03 июля 2020, 16:40
                Смотри по какому типу:
                [[!pdoResources
                &tpl=`test`
                ]]
                чанк test:
                div
                img
                h2
                p (краткое описание)
                Полная статья
                /div
                div class=«modal»
                img
                h2
                p (полная статья)
                /div

                Примерно такого формата. Да есть отдельная страница которая находится в collections.
                  Никита
                  Никита
                  04 июля 2020, 13:33
                  CSS файл библиотеки подключать нужно? И как в js файле нужно вызвать его?
      Никита
      Никита
      03 июля 2020, 15:21
      Если есть ещё решения — буду рад увидеть.
        Aborrol
        Aborrol
        03 июля 2020, 16:09
        Можно написать modx плагин на onhandlerwebrequest, где проверять что это аяксзапрос с ключом, и отдавать только контент и нужные твполя по полученному id, форматируя через чанк.
        При клике на ссылку открытия модального окна, получаем параметр id, отправляем через аякс пост запрос, подставить полученные данные в модалку и отобразить её. Но вариант выше с селектором гораздо проще
        Максим
        Максим
        04 июля 2020, 13:57
        На мой взгляд вариант с FancyBox хорош, нотолько в том случае если у вас уже есть понимание как работает MODx (или вам это не нужно) и если есть в проекте FancyBox. Я бы не стал для такой простой задачи тянуть в проект доп либу. Ведь нет ничего сложного в том, что бы проанализировать работу miniShop2 и реализовать по образу и подобию. Ну или посмотреть видосик, например этот, но сразу скажу, что не все так гладко с безопасность в примере из этого видео. Но и в названии написано, что это основы.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          12