UIKit Modal Dynamic Content

Hi everyone,

I know this is off Beans topic and more a UIkit / PHP / jQuery question but any help would be great.

What I am trying to attempt is having an enquire form (contact form 7) for every product in a Custom Post Type and the form has a dynamic field that pulls in the product title to populate a form field. That works and loads into every product fine.

However I would like to place this form into a Modal but this doesnt work on archive pages as when the modal is launched it shows the first modal for the first post in the loop while the others remain hidden - all the modals for all the posts have the same ID so the first one always is called.

I've temporarily fixed this by concatinating the modal id and button target with the post number in the loop, so the id's become unique however this affects further fucntionality I want to impliment down the line.

My current solution is as follows but it's not ideal:

global $wp_query;
$counter = $wp_query->current_post; 

<a href="#enquire-<?php echo $counter; ?>" data-uk-modal></i>Enquire</a>

<div id="enquire-<?php echo $counter; ?>" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        <?php do_shortcode( '[contact-form-7 id="126" title="Test Form"]' ); ?>

So my question is how do I make the UIkit modal dynamic to solve this problem? Any help or insight would be greatly appreciated.


Write a reply

Login or register to write a reply, it's free!