如何在单击的项目下方显示详细的div /弹出框

Question

我试图建立一个使用html的布局，例如以下两个图像。

每个项目的详细信息div / popup应该在被单击的项目的正下方打开。

如果是台式机

如果是手机/平板电脑

现在我不知道该如何进一步..

请为我指出正确的方向，或者给我链接到正在发生这种功能的一些演示网站，请为此提供帮助。

Answer 1

是否要执行“ Google图片搜索”部分？

如果您想做这样的事情，您可以简单地用信息创建“ div”并添加一些隐藏的类，当用户单击主div时，您将使用javascript附加“可见”类。 这就是全部。

如果您需要通过一些ajax调用获取信息，则逻辑是相同的。 假设，每个图片都有这个html：

<a href="/link/for/no/js" data-id="idDivWithInformation" class="link-information">...</a>
//hidden div    ..... 
<div id="idWidthInformation class="hidden">....</div>

然后，使用jQuery，您可以执行以下操作；

$('#contentImages').on('click','a.link-information',function){
     var $this = $( this );
      // show the hidden div
     $($this.data('id')).removeClass('hidden').fadeIn()

})

样式和设计是使用CSS定义的，用于“模式”视图或某些视图（例如Google图片搜索）。 例如，如果要使用诸如animate.css之类的css库，也可以使用css和为“ addClass”更改de“ fadeIn”代码来创建模态动画。

Answer 2

您可以使用引导程序模态，尝试访问此链接以查看文档。 http://www.w3schools.com/bootstrap/bootstrap_modal.asp

在其中进行了说明，您可以使用data-toggle="modal"和data-target="#your_model_id" bottstrap属性。

希望可以回答您的问题：D

Answer 3

有几种方法...干净的javascript中的一种是让一个容器加载数据或多个容器（每个元素一个）。

1. 创建容器元素以获取信息

   var someContainer = "<div id='msgContainer'>someMessage</div>" ;

2. 在元素上定义onclick ='elementClicked（event）'动作或其他方式

   function elementClicked(event) { //get mouse coords where clicked //mouse X event.clientX; //mouse Y event.clientY; //get element you use as a container for messages //var msgContainer = document.getElementById("msgContainer"); //this will set //load container with any info if you're using one container element for all 'menus' //msgContainer.style.position = "absolute"; //msgContainer.style.top = event.clientY"; //msgContainer.style.left = event.clientX; }

或者，就像我说的那样，每个元素可以有一个隐藏的容器（div或任何其他元素），然后只需要显示和隐藏它们即可。

使用jQuery，所有这些都应该更容易。