php post content in a popup div

Question

I have several elements within a website that are linked to separate php posts. The site also has one popup div('it's a custom modal window'). The popup div has two sections, title and content.

When the elements are clicked, the popup window will appear. I want the associated php post title and content to appear in the popup div in its proper section.

NOTE: I have tried for a week to figure this out using, php, ajax/jquery, combinations. I have scoured google and stackoverflow and can't seem to find the missing link.

Below is my code structure.

FIRST: This is the closest I've got to a working model. The php post_title and post_content is added to the popup window in the appropriate place. But adding code for the next element overrides the first elements data.

HTML

<div class="hexagon">
  <p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
    <!-- ATTACH LATEST POST TITLE -->
      <?php $the_query = new WP_Query( 'cat=4' ); ?>
      <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
        <?php the_title(); ?>
      <?php endwhile;?>
  </p> 
</div>

<div class="hexagon">
  <p class="verticalcenter center" data-toggle="popWindow" data-target="#popUp">
    <!-- ATTACH LATEST POST TITLE -->
      <?php $the_query = new WP_Query( 'cat=5' ); ?>
      <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
        <?php the_title(); ?>
      <?php endwhile;?>
   </p>
</div>

JS

Note: The 'overlay' is a background with opacity that covers the main content to help focus on the 'popUp' div.

$(document).ready(function() {
...//other code pertaining to website operation

//Click on Hexagons && Launch Modal
  $('.hexagon,.hexagonz,#mapToken,.mobileNav li').on('click', function() {
    $('.overlay').removeClass('hidden');
      $('#popUp')
        .addClass('animated fadeInUp')
        .css( {
            'bottom': '25%' 
        } )
  }); //end Modal Launch

...//other code pertaining to website operation

});// end $(document).ready

The popup window(Modal) html code is located in my footer.php file along with a single.php file containing duplicate popup window code.

IDEALLY: I'd like to accomplish this without resorting to using an (a href=''). This website has a splash page that loads in front of the main page on first load. When I have tried fix this using an (a href='') link, it triggers the splash page(not what I want).

Hope the structure and end goal are clear.

Aramil Rey Aramil Rey · Accepted Answer · 2015-08-13T13:39:52

You should first create a PHP script to send each popup the correct info.

Then you could attach a $.post on click, to the button that triggers the popup open, with a 'data-contents' or something similar

Then do the post like this:

$(document).on('click', '.myPopupButton', function(e) {
    e.preventDefault();
    data = { content : $(this).attr('data-contents') };
    $.post('yourScript.php', data, function(json) {
        // Handle the data that comes from your script
        // i.e. :
        $('.myPopup .title').text(json['title']);
        $('.myPopup .body').text(json['body']);
    }
});

Your PHP should be expecting a value like content => xxx

So you could get it like this:

if ($_POST['content'] == 'xxx') {

}
else if ( /*etc..*/ ) {}

Now the content of the popup should change dinamically

php post content in a popup div

1 Answers