0

This is my modal code. The first code displays and image, job title and name of each post ID.

When the user clicks on the more info link it should open a button with more info about the post, but instead it opens all post modals. Is there any way I can get only the same post ID to open as a modal?

<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">more 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"></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/">Become a Member!</a>
        </div>
      </div>

  <?php }?>  

Sorry have added the script below

<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>
  • What does the moreinfoModal function do? – ngearing Aug 6 '18 at 22:20
  • my bad, have added the script below. – Remco Aug 6 '18 at 22:23
0

So your script is doing exactly what you have told it to do.

Here you are passing the element to the function, but you never use it, instead you just query all elements with a class and add another class.

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

What you should do is only add the class to the element the buttin is targeting:

function moreinfoModal(field) {
    // Get the button target.
    var target = field.getAttribute('data-target')
    // Add class to target.
    $(target).addClass('open');
}

And when you need to close the model window. You can just look for only models that are open. As you aren't passing an element in to get the id from.

function closeMoreInfoModal() {
    // Close all windows because you we dont have the open elements id.
    $('.moreinfo-modal.open').removeClass('open');
}
| improve this answer | |
  • Very good explanation, thank you. I have added the second and last bit of code, but its not yet working - so just working through it again. Thanks again for your help. – Remco Aug 6 '18 at 23:05
  • hmm, just this function moreinfoModal(field) { $(field.id).addClass('open'); } doesn't seem to add a class. I'm probably missing something – Remco Aug 6 '18 at 23:12
  • Oh right, well it would add a class just not to the right element. We should add the class the the button target not the button itself... Sorry my mistake, I'll update my answer. – ngearing Aug 7 '18 at 0:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.