如何在單擊項目下方顯示詳細的div /彈出框

Question

我正在嘗試在html中構建一個佈局，如下面的兩個圖像。

細節DIV /每個項目的彈出窗口應在正下方被點擊的項目..打開

在桌面的情況下

而在移動/平板電腦

的情況下，

現在我不知道如何進一步去做..

請指向正確的方向或給我一個鏈接到一些演示網站，這種功能正在發生 請幫我解決這個問題..

Answer 1

您可以使用引導模式，嘗試訪問此鏈接看到文檔。 http://www.w3schools.com/bootstrap/bootstrap_modal.asp

在它那裏解釋的，可以使用data-toggle="modal"和data-target="#your_model_id" bottstrap屬性。

希望能回答你的問題：d

Answer 2

你想這樣做"google images search"部分？

如果你想做這樣的事情，你可以簡單地創建帶有信息的「div」，並​​添加一些類來隱藏它，當用戶點擊主div時，你用javascript附上一個「可見」類。這就是全部。

如果你需要把你的信息與一些Ajax調用，邏輯是相同的。 Supose，你有這樣的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創建動畫並改變de「fadeIn」代碼。

Answer 3

有幾種方法.. 。他們中的一個乾淨的JavaScript是有一個容器，你加載數據或許多容器（每個元素一個）。

1. 創建信息

   var someContainer = "<div id='msgContainer'>someMessage</div>"容器元件;

2. 定義的元素或以其他方式

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

交替的onclick =「elementClicked（事件）」行動，我說你可以有一個隱藏的容器（股利或任何其他元素）每個元素，然後你只需要顯示和隱藏它們。

所有這一切應該更容易使用jQuery。