AJAX functionality for WordPress themes

functions.php

function fetch_modal_content() {
  if ( isset($_REQUEST) ) {
    $post_id = $_REQUEST['id'];
  ?>

    <div class="modal-body">
      <h1><?php echo get_the_title($post_id); ?></h1>
      <?php echo wpautop(get_the_content($post_id)); ?>
    </div>

  <?php
  }
  die();
}
add_action( 'wp_ajax_fetch_modal_content', 'fetch_modal_content' );
add_action( 'wp_ajax_nopriv_fetch_modal_content', 'fetch_modal_content' );

index.php

<!-- Assumes that you're using Bootstrap -->

<button id="button" data-id="23">Load Modal</button>

<div id="modal" class="modal fade">
  <div class="modal-dialog">
    <div id="modal_target" class="modal-content">
      
    </div>
  </div>
</div>

site.js

// Assumes that you're using jQuery and Bootstrap
// The `ajaxurl` variable, should be declared in 
// header.php like so:
// ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

var $button = $('#button');
var $modal = $('#modal');
var $modal_target = $('#modal_target');

$button.click(function() {

  var id = $(this).data('id');

  $.ajax({
    url: ajaxurl,
    data: {
      'action' : 'fetch_modal_content',
      'id' : id
      },
    success:function(data) {
      $modal_target.html(data);
      $modal.modal('show');
    }
  });

});