Javascript 将DIV显示为覆盖

我一直是一名后端开发人员，并试图使用RoR做一些UI工作

I have a list object that I want to display.
Object1
Object2
Object3
Object4
...

我已经做了这一点

现在，当用户单击Object1时，我想显示对象中的详细信息（类似于）

我理解示例中的代码

如果有隐藏的div，单击即可显示它。但在我的例子中，我有很多对象（几百个），每个对象都非常大，我不想在加载页面时检索所有数据。因此，当前当用户单击一个对象时，我只需打开一个新页面，其中所有数据都是详细显示的。我想要的是像上面的示例一样打开一个覆盖，并渲染其中的数据

我不熟悉UI开发的行话，在开始自己编写代码之前，我很难找到它的现有实现

---

许可对我来说是一个问题，所以我想坚持使用vanilla jQuery和RoR。不要将第三方库用于所有类型的许可方案。

正如Lakshmi在评论中提到的，您应该使用Ajax方法加载和显示数据。您的Ajax响应应该用对象细节填充一个隐藏元素，然后触发过度显示。

正如我在评论中所说的，您可以使用。它所做的是，当您单击一个链接时，它不会重新加载整个页面，而是异步地向服务器发送一个请求并返回响应，而响应可以在javascript中处理以更新页面

因此，在您的场景中，单击链接时，您只需向服务器发送一个ajax请求，检索要在覆盖框中显示的数据，设置文本，然后执行必要的操作来显示覆盖框本身

当您试图处理AJAX本身时，它会导致一些小问题。因此，我建议使用JQuery库的ajax API。这更易于使用，而且跨浏览器兼容

对于这样一个div：

<div id="overlay"></div>
<button id="load">Load Box</button>

---

请准备一些示例代码，并在发布您遇到的特定问题之前亲自尝试。您必须使用ajax！

$("#load").click(function(){
  //ajax request
  $.ajax({
    url: "your/web/service.aspx",
    cache: false
  })
  .done(function(response_text){
     //setting the response got to the overlay box
     //this can be a plain text or html or json. 
     //you need to set the box appropriately.  
     $("#overlay").text(response_text);
     //then do the needful to display overlay box
  });
});