9

これは最初のモーダルのコードです。次の 2 つのモーダルで変更されるのは、内部の画像リンクだけですが、表示されるのはこれらだけです。

<div id="modallinkleft">
  <a href="#myModal" data-toggle="modal">
  <img src="mylinks/cp/117s.jpg">
  <img src="mylinks/cp/23s.jpg">
  <img src="mylinks/cp/08s.jpg">
  </a>
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
      <img src="mylinks/cp/117.jpg">
      <img src="mylinks/cp/23.jpg">
      <img src="mylinks/cp/08.jpg">
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">x</button>
    </div>
  </div>
</div>
4

2 に答える 2

10

各モーダルには異なる idを指定し、各リンクには異なるモーダル id をターゲットにする必要があります。したがって、次のようになります。

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

このようにして、最初のリンクをクリックすると最初のモーダルがポップアップし、2 番目のリンクをクリックすると 2 番目のモーダルがポップアップします。

于 2013-05-11T06:02:45.997 に答える