how load content as pop-up using ajax

Question

There's a way to use ajax to load the content from single.php or a custom .php like ajax-single.php like this page does it: https://yellowimages.com/all/objects/apparel-mockups/ also like them show the URL from the post when you click on the link, I hope somebody can help me with this because I can't find a way to do it yet.

EDIT 1: I use the next code on my index.php to load the post titles with the permalink:

<div id="single-post-container"></div>
<div class="wrap">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

       <?php the_title(); ?> 

    </a>

    <?php endwhile; endif; ?>
    </div>

This code on my single.php file:

    <?php

    $post = get_post($_POST['id']);

?>
    <div id="single-post post-<?php the_ID(); ?>">

    <?php while (have_posts()) : the_post(); ?>

                <?php the_title();?>

                <?php the_content();?>

    <?php endwhile;?> 

    </div>

And this on my footer.php file:

<script>
   jQuery(document).ready(function($){

        $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
            var post_link = $(this).attr("href");

            $("#single-post-container").html("content loading");
            $("#single-post-container").load(post_link);
        return false;
        });

    });
</script>

This only load the content inside the div, and I'm having issues to display the URL from the post on the address bar, also the div doesn't expand with the content, I hope somebody can help me with this.

Answer 1

If you want to load PHP file through AJAX use the below code.

function sendAJAX(){
    $('#container').load(
    "stuff.php",  // url
    { // json object of data to pass to the page
        stuff: "all your stuff goes in here...",
        moreStuff:  "even more stuff"
    });
    console.log('sendAJAX'); 
};

Let me know, In case of any doubts.