单击以使用 Jquery 和 ajax 显示详细信息

Question

我有一个关于弹出幻灯片的问题。我想按照图片做:

所以我用它来点击显示 post 详细信息：

function getAreaInfo(id)
{
  var infoBox = document.getElementById("infoBox");
  if (infoBox == null) return true;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) return;
    if (xhr.status != 200) alert(xhr.status);
    infoBox.innerHTML = xhr.responseText;
  };
  xhr.open("GET", "get_post_info.php?msg_id=" + id, true);
  xhr.send(null);
  return false;
}

这是link:

<a href="get_post_info.php?msg_id=351" class="" onclick="return getAreaInfo(351);" data-id="7"> Click To Show Post Details </a>

正在显示详细信息div：

<div id="infoBox"></div>

Answer 1

为此，我将使用设置为 position: fixed 的容器，其中的侧边栏菜单设置为 position: absolute 并放置在屏幕外：

HTML

<div class="sidebar">
   <div class="sidebar-content">
     ...content...
   </div>
</div>

CSS

 .sidebar{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.5);
}

.sidebar-content{
    position: absolute;
    width: 200px;
    height: 100%;
    right: -200px;
    background: #FFF;
}

我还会添加您希望使用 ajax 提取的记录的 ID 作为个人资料图像上的数据属性

<div class="profile-photo" data-id="1"></div>

然后设置您的点击事件：

首先点击个人资料图片，提取相应的 ID，然后 ajax 调用您的数据库以检索记录。成功显示叠加层并滑出侧边栏，现在填充了数据库中的内容：

$(".photo").click(function(){
   var id = $(this).data("id");

   $.ajax({
     url: "your_url.php?="+id,
     type: 'get',
   }).done(function(data) {
      $(".sidebar").fadeIn().find(".sidebar-content").animate({"right":0}, 200).html(data);   
   });

});

然后您可以创建点击功能以在您点击背景时关闭侧边菜单：

$(".sidebar").click(function(){
   $(".sidebar-content").animate({"right":"-200px"},200,function(){
      $(".sidebar").fadeOut();   
   });     
});

如果您在实际菜单中，还有一个可以防止菜单关闭

$(".sidebar-content").click(function(e){ 
   e.stopPropagation();
});

FIDDLE

单击以使用 Jquery 和 ajax 显示详细信息

Click to show detail using Jquery and ajax

javascript

ajax

jquery