0

my theme has option that there is a button in each post that I can give it a link. But I want to open a modal with clicking on this button and be able to modify the modal in each post. It means each post a special modal. Is it possible?

0

Yes it is possible. I think you are using bootstrap modal. And it is looks like this: Bootstrap Modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

And now you see it works with special ID and special data-target So you must give special ID and data-target for each modal.

Let's create new query with speacial modals.

<?php
// Custom WP query query
$args_query = array(
    'order' => 'DESC',
);

$query = new WP_Query( $args_query );

if ( $query->have_posts() ) {
    while ( $query->have_posts() ) :
        $query->the_post(); ?>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-<?php echo esc_attr( get_the_ID() ); ?>">
            Open "<?php the_title(); ?>" Modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal-<?php echo esc_attr( get_the_ID() ); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <?php the_content(); ?>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
<? endwhile; } else {
    echo 'No posts found';
}
wp_reset_postdata();

?>
0

I would recommend creating a unique shortcode to output the button and modal. I recently did something very similar using Caldera Forms. I wanted to output the form with some additional headings and contextual content before the form output.

I wrote a tutorial on creating that shortcode with a live example here: https://www.mattcromwell.com/contexual-optins-with-caldera-forms/

Happy to answer any follow-up questions on that if you review it and have questions.

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.