I can not retrieve a specific portion of an HTML file (blog post) with AJAX

Hello to the WordPress community!

I have a small problem with a feature that I’m trying to implement on my site. I want when I click on an excerpt from a blog post on my homepage that the content of the article (single.php) opens in a modal window.

I use jQuery and Ajax to do that and it works really well except that Ajax fetches me the entire contents of single.php file (ie the header with scripts, styles, doctype, footer, etc.). I would just like to get the div (#PostContainer) that includes the title of the article and the content.

You will probably tell me to just delete my header and footer of the single.php file, but this is not possible because it is important to keep intact my file to be able to access from the address of the blog post (www.mydomainname.com/blog-post1).

Someone would have any idea ?

Thank you so so much for your time !

Here are my code :

HTML :
<a class="hs-inner-click modal" data-content="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

CSS :

.modal-window {
  position: fixed;
  left: 50%;
  top: 50px;
  width: 720px;
  background-color: #fff;
  transform: translate(-50%, 0);
  z-index: 11;
}
.modal-shade {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 10;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

JQUERY & AJAX :

(function($) {

	$.fn.modal = function (opt) {

		var settings, createModal, closeModal, body;

		settings = $.extend({
			'modal': 'jquery-modal',
			'close': 'jquery-modal-close',
			'closeText':'',
			'shade': 'jquery-modal-shade'
		}, opt);

		body = $('body');

		closeModal = function(modal, shade) {
			modal.remove();
			shade.remove();
		};

		createModal = function(data) {
			var shade, close, modal;

			shade =$('<div />', {
				class: settings.shade
			}).on('click', function() {
				closeModal(modal, shade);
			});

			close =$('<a />', {
				text: settings.closeText,
				class: settings.close,
				href: '#'
			}).on('click', function(e) {
				closeModal(modal, shade);
				e.preventDefault();
			});

			modal =$('<div />', {
				html: data,
				class: settings.modal
			}).append(close);

			body.prepend(shade, modal);
		};

		this.on('click', function(e) {
			var self =$(this);

			$.ajax({
				url:self.data('content'),
				type: 'get',
				cache: false,
			}).done(function(data) {
				createModal(data);
			}).error(function() {
				createModal('There is a mistake');
			});
		e.preventDefault();
		});

	};

})(jQuery);