Problème avec load()

Bonjour, ayant cherché des sujets en rapport avec mon problème sur le forum, j'ai tenté de corriger mon code mais rien ne se passe, j'ai du passer à coté de quelque chose et j'espère trouver un éclaircissement ici :) . J'ai essayé d'utiliser load() de sorte à lorsqu'on clique sur une image, une fenêtre modale s'ouvre avec le contenu d'une autre page html.

Voici le bout de code en rapport avec ce dont je parle.

sur la page principale :

<div id="works">
<a href="#works" class="print canta"><img src="images/thumb/print/canta.jpg"><p>La Cantatrice Chauve</p></a>
...
</div>

<div id="projet"></div>

$("#works a").click(function () {
    if ($(this).hasClass("canta")) {$("#projet").load("projects/canta.html", function(){ $("#projet").show(); } );}
    return false;
    });
    
});

le code css du div #projet :

#projet {
position:absolute;
background-color: #000;
opacity:100;
width:100%;
left:0;
top:1000px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3 s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
height:auto;
z-index: 1000;
} 

et le contenu de canta.html :

<html>

<p>A minimalist poster I did for a theater play</p>

<img src="canta.png">

</html>