Wordpress blog page with blog content to come up in Bootstrap modal rather than new page

Question

I would like my WordPress blog content to come up in a modal using BootStrap rather than opening a new page.

Answer 1

This is the working code

<?php get_header(); ?>
<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
        <?php if ( have_posts() ) : while ( have_posts() ) :   the_post(); ?>
        <!--The modal opener as a title-->
        <a href="" data-toggle="modal" data-target="#<?php the_ID(); ?>"><?php the_title(); ?></a>
        <?php $myExcerpt = wp_trim_words( get_the_content(), 60, '' ) ; 
echo $myExcerpt ; ?>
        <!--The modal opener as an arrow (using Fontawesome)-->
        <a href="" data-toggle="modal" data-target="#<?php the_ID(); ?>"><i class="fas fa-arrow-right"></i></a>

        <!--The modal-->
        <div class="modal fade blog_modal" role="dialog" id="<?php the_ID(); ?>">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal">
                        <h3>&times;</h3>
                    </button>
                    <div class="modal-body">
                        <?php  get_template_part( the_content() ); ?>
                    </div>
                </div>
            </div>
        </div>
        <?php endwhile; else: ?>
        <p>There no posts to show</p>
        <?php endif; ?>
        <?php get_sidebar(); ?>
        <?php get_footer(); ?>

Using data-target="#<?php the_ID(); ?>" allows the modal to have id="<?php the_ID(); ?>"

The modals can be in their own loop (eg in the footer) and the opener links can be looped through as needed