我在页面上有两个模态,(我正在使用bootstrap);点击任何模态只会打开第一个模态

这是第一个模态的代码;接下来的两个模态中的所有变化都是内部的图像链接,但只有这些显示出来.

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

每个模态应该被赋予不同的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>
...

这样,如果单击第一个链接,它应弹出第一个模态,如果单击第二个模式,则会弹出第二个模态.