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>

内容已加载，但弹出窗口未加载。

Answer 1

这是我的问题的解决方案：

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

<script type="text/javascript">
    $('a').click(function(){
        showPics($(this).attr('class').charAt(0)) //Ajax function call
    });
</script>

<script type="text/javascript">
    $('a').magnificPopup({ //Popup call
        type:'inline',
        midClick: true,
        closeBtnInside:true
    });
</script>

<div id="displayPics" class="white-popup mfp-hide"><b>Pictures will be listed here.</b></div>

谢谢你们。