ajax - Ajax を使用してポップアップにデータをロードする

Question

私は自分のウェブサイトで壮大なポップアップを使用しています。リンクがクリックされたときに ajax 関数を実行し、クエリの結果がポップアップのコンテンツになるようにしたいと考えています。

これは私のコードです（私はJQueryでかなり新しいです）：

<script>
  function showPics(str)
  {
    if (str=="")
    {
      document.getElementById("displayPics").innerHTML="";
      return;
    } 

    xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("displayPics").innerHTML=xmlhttp.responseText;
      }
    }

    xmlhttp.open("GET","getpics.php?q="+str,true);
    xmlhttp.send();
  }
</script>

<a class="1-popup" href="#">Guerlain</a>

<script type="text/javascript">
    $('a').click(function() {
        showPics($(this).attr('class').charAt(0)), //Ajax function call
        $(this).magnificPopup({ //Popup call
            type:'inline',
            midClick: true,
            closeBtnInside:true
        });
    });
</script>

<div id="displayPics"><b>Pictures will be listed here.</b></div>

コンテンツは読み込まれますが、ポップアップは読み込まれません。