クリックしたアイテムのすぐ下にある詳細div /ポップアップボックスを表示するには

Question

次の2つのイメージのようにhtmlでレイアウトを作成しようとしています。

各項目の詳細DIV /ポップアップが右クリックされた項目の下に開く必要があります

..

デスクトップ

およびモバイル/タブレット

の場合の場合

今すぐ私にはさらに進んでいく方法がありません。

正しい方向に私を指摘してください、または私にこの種の機能が起こっているデモウェブサイトへのリンクを教えてください。

Answer 1

ブートストラップモーダルを使用して、このリンクを訪問してみてくださいドキュメンテーション

で説明しているので、data-toggle="modal"とdata-target="#your_model_id"ボトストラップ属性を使用できます。ご質問にお答えすることができます

希望：D

Answer 2

あなたは"google images search"セクションような何かをしたいですか？

もしあなたがこのようなことをしたいのであれば、情報を使って "div"を作成して、それを非表示にするクラスを追加することができます。メインdivをクリックすると、javascriptで "visible"これだけです。

ajax呼び出しで情報を取得する必要がある場合は、ロジックは同じです。あなたは、各画像については、このHTML持っ Supose、：

<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() 

}) 

スタイルやデザインは、「モーダル」ビューやGoogle画像検索のようなビューの場合はCSSで定義されます。あなたのモーダルを示すアニメーションは、また、CSSで作成し、 "addClass"のコードを変更することもできます。例えば、animate.cssのようなCSSライブラリを使用したい場合は

Answer 3

です。それらのうちの1つは、データまたは複数のコンテナ（各要素に1つ）でロードする1つのコンテナを持つことです。

1. 情報

   var someContainer = "<div id='msgContainer'>someMessage</div>"のコンテナ要素を作成します。私はあなたが1個の隠れコンテナ（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を使用する方が簡単です。