如何在單擊的項目下方顯示詳細的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，所有這些都應該更容易。