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

Question

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

所以我用它来点击显示帖子详情：

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;
}

这是链接：

<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