2016-04-28 22 views
0

私は私のHTMLコード内のテーブルを持っていると私は<li>タグにクラスを入れて窓を「ポップアップ表示」してくださいアップが表示されます。私はポップアップコンテンツを一意にしたい。誰かが最初のものをクリックすると、21グラムの映画に関する情報がポップアップ表示されます。誰かがアモーレス・ペロスなどのために、二をクリックした場合:上記のコードではリンクがオープン異なるコンテンツ

<div id="ModalContentWrap" class="modal-wrap"> 
    <div class="modal-content mix"> 
    <section id="stigma-box"> 
     <header> 
     <h1>21 Grams</h1> 
     <span class="avatar"><img src="http://apolosiskos.co.uk/images/movies/21grams.jpg" alt="" /></span> 
     <h3><a href="http://www.imdb.com/title/tt0315733/" target="blank">A freak accident brings together a critically ill mathematician, a grieving mother, and a born-again ex-con.</a></h3> 
     </header> 
    </section> 
    </div> 
</div> 

<div id="ModalContentWrap" class="modal-wrap"> 
    <div class="modal-content mix"> 
    <section id="stigma-box"> 
     <header> 
     <h1>Amores Perros</h1> 
     <span class="avatar"><img src="http://apolosiskos.co.uk/images/movies/amoresperros.jpg" alt="" /></span> 
     <h3><a href="http://www.imdb.com/title/tt0245712/" target="blank">A freak accident brings together a critically ill mathematician, a grieving mother, and a born-again ex-con.</a></h3> 
     </header> 
    </section> 
    </div> 
</div> 

<div id="ModalContentWrap" class="modal-wrap"> 
    <div class="modal-content mix"> 
    <section id="stigma-box"> 
     <header> 
     <h1>Father and Son</h1> 
     <span class="avatar"><img src="http://apolosiskos.co.uk/images/movies/babamveoglum.jpg" alt="" /></span> 
     <h3><a href="http://www.imdb.com/title/tt0476735/" target="blank">Sadik is one of the rebellious youth who has been politically active as a university student and became a left-wing journalist in the 70's, despite his father's expectations of him becoming...</a></h3> 
     </header> 
    </section> 
    </div> 
</div> 

を、関係なく、私がクリックし何を、私は最初の映画のための情報をポップアップを取得していないのです。

答えて

0

あなたのモーダルのIDはすべて同じであるため、それらを一意にする必要があります。各トリガを一意にするように設定する必要があります。例えば

(これはモーダルでない使用可能なコードを使用する方法のほんの一例です):

<a href="#test1" data-toggle="modal">Click me for test1 id!</a> 
<div id="test1" data-type="modal"> 
    Some content here... 
</div> 


私はあなたが使用している場合はhttp://www.w3schools.com/bootstrap/bootstrap_modal.aspを見てみましょう示唆ブートストラップ...

+0

どうすれば動的に変更できますか?id = "ModalContentWrap"すべてのボックスにid = "ModalContentWrap_1"とid = "ModalContentWrap_2"などが必要です。しかしそれはCSSファイルを大きくするでしょう。 –

+0

これは正しいです。そのため、テンプレート・モーダルを使用し、Ajaxを使用してコンテンツをロードする必要があります。 –

+0

これを行う方法はありますか? stackoverflow上の任意のユースケース?以前はAJAXを使ったことがありません。 –

関連する問題