Как получить ID записи из кнопки и передать заголовок в модальное окно

Question

Как получить ID записи из кнопки и передать заголовок в модальное окно

3 авг. 2018 г., 16:08:50

Просмотры: 20K

Голосов: 0

    <div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
      <span class="name"><?php echo $title ?></span><span class="jobtitle"><?php echo $jobtitle ?></span>
      <a onclick="return moreinfoModal(this);" id="<?php get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal" href="javascript:void(0);" class="info">подробнее</a>
    </div>


    <div id="moreinfo-modal" role="dialog">
          <div class="teammember_div">
            <a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
            <?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
            <p><?php echo $title ?></p>
            <p><?php echo $about ?></p>
            <span class="jobtitle"><?php echo $jobtitle ?></span>

            <span id="moreinfo" style="display: inherit;"></span>
            <a id="modal-join" class="btn-cta" href="/sign-up/">Стать участником!</a>
          </div>
        </div>

    <?php }?>
    </div>
    </div>

Я отображаю 4 карточки с именами и должностями и кнопкой для открытия модального окна. Когда пользователь нажимает на кнопку, открывается модальное окно с изображением, заголовком, описанием и т.д...

К сожалению, я могу открыть модальное окно только с деталями одной записи. Я хотел бы сопоставить содержимое модального окна с содержимым карточек, если это понятно.

Например: карточка = Гарри Модальное окно = Гарри

<script> function moreinfoModal(field) {
        console.log(field.id);
        $('#moreinfo-modal').toggleClass('open');
    }


    function closeMoreInfoModal() {
        $('#moreinfo-modal').toggleClass('open');
    }

    $(document).on('click', '.close-pill', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>

Есть идеи, что я упускаю?

Remco

125

php цикл

Комментарии

Похоже, у вас нет части, которая вставляет данные в модальное окно в js-коде

idpokute

3 авг. 2018 г. 16:34:47

Да, и вот здесь я немного в замешательстве. Буду признателен за помощь. Как мне это реализовать?

Remco

3 авг. 2018 г. 16:47:55

Все ответы на вопрос

Комментарии

Привет, спасибо за код — в текущем виде он не работает, но направил меня в правильном направлении, так что я продолжу над ним работать. Спасибо!

Remco

6 авг. 2018 г. 14:12:57

Итак, хотя он выводит модальные окна, он показывает все модальные окна по одному клику — то есть выводит все ID записей, а не только один. Есть какие-то советы?

Remco

6 авг. 2018 г. 23:56:21

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

Nilesh Sanura

7 авг. 2018 г. 09:22:58

Не беспокойся, исправил, теперь вызывается только одно модальное окно - спасибо!

Remco

7 авг. 2018 г. 16:55:15

Отлично... :)

Nilesh Sanura

7 авг. 2018 г. 17:09:10

Nilesh Sanura 49 · Accepted Answer · 2018-08-04T15:14:24Z

Когда мы отображаем данные поста в модальном окне по клику на кнопку, необходимо предоставить post-id с помощью атрибута data для конкретной цели модального окна.

Пожалуйста, добавьте post-id в data-target в теге anchor, а также в ID основного div.

Я изменил ваш код:

<div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
  <span class="name"><?php echo $title; ?></span><span class="jobtitle"><?php echo $jobtitle; ?></span>
  <a onclick="return moreinfoModal(this);" id="<?php echo get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal-<?php echo get_the_ID();?>" href="javascript:void(0);" class="info">подробнее</a>
</div>


<div id="moreinfo-modal-<?php echo get_the_ID();?>" class= "moreinfo-modal" role="dialog">
      <div class="teammember_div">
        <a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg" alt="Закрыть модальное окно" title="Закрыть"></a>
        <?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
        <p><?php echo $title ?></p>
        <p><?php echo $about ?></p>
        <span class="jobtitle"><?php echo $jobtitle ?></span>

        <span id="moreinfo" style="display: inherit;"></span>
        <a id="modal-join" class="btn-cta" href="/sign-up/">Стать участником!</a>
      </div>
    </div>

<?php }?>
</div>
</div>

Также вы можете изменить js-код, чтобы клик обрабатывался по классу вместо ID div:

<script> function moreinfoModal(field) {
        console.log(field.id);
        $('.moreinfo-modal').toggleClass('open');
    }


    function closeMoreInfoModal() {
        $('.moreinfo-modal').toggleClass('open');
    }

    $(document).on('click', '.close-pill', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>

Надеюсь, это решит вашу проблему. :)