A
A
Alexander Ruzhevich2015-12-30 22:46:42
WordPress
Alexander Ruzhevich, 2015-12-30 22:46:42

How to display a post in a Wordpress modal window?

Good day.
there is a wordpress loop like this

<div class="container cat_cocktails">



  <div class="row">

  
  <?php if ( have_posts() ) : ?>


      <?php /* The loop */ ?>
      <?php while ( have_posts() ) : the_post(); ?>
  
  
    <div class="col-sm-2 cat_post_div" style="background-color:<?php echo do_shortcode('[types field="background_post"][/types]'); ?>;">
    
      <div class="row title_cat">
      
        <?php the_title(); ?>
      
      </div>
      
      <div class="row cat_post_img">
      
        <?php if ( has_post_thumbnail()) {the_post_thumbnail('full',array("class"=>"thumb_cat"));} ?> 
      
      </div>
      
      <div class="row cat_buttom_post">
      
         <a href="#" style="color:#fff; text-decoration:none"> more</a>
      
      </div>

and now the actual question: next comes the block in which the content is displayed, it is hidden, how to make it so that when you click on "more" this window appears with the close button (well, or change its style, for example, display: block; or through transparency)
<div class="modal_window" style="display:none;">
      
        <?php the_content(); ?>
      
      </div>
    
    
    </div>
    
    
    <?php endwhile; ?>

      

    
      
    <?php endif; ?>
  
  
  </div>

</div>

the bottom line is that the content of the post that was clicked on would be displayed. and on clicking "close" again display:none; . I understand how to do it on hover, that is, apply the hover effect and change display:none; on display:block; and here's how to do it when clicked ... there are many ways, but I can't make them work in a cycle for the life of me, I understand that the solution is easy and is "under the nose" and there is no way to find

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question