Question

我的HTML代码中有一个表格，我在<li>标记中添加了一个类，如下所示：

<li class="modal-trigger"><img src="http://apolosiskos.co.uk/images/movies/21grams.jpg">21 Grams</li>
<li class="modal-trigger"><img src="http://apolosiskos.co.uk/images/movies/amoresperros.jpg">Amores Perros</li>
<li class="modal-trigger"><img src="http://apolosiskos.co.uk/images/movies/babamveoglum.jpg">Babam Ve Oglum</li>

当有人点击链接时，会弹出一个弹出窗口。我想让弹出内容与众不同。如果有人点击第一个，那么应该弹出一个关于21grams电影的信息。如果有人点击第二个，对于amoresperros等：

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

使用上面的代码，无论我点击什么，我都会弹出第一部电影的信息。

Answer 1

请注意，您所有模态的ID都是相同的，因此您需要将它们更改为唯一。您需要将每个触发器设置为唯一的。

例如（这只是使用模态不可用代码的方法的一个示例）：

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

如果您使用的是Bootstrap，我建议您查看http://www.w3schools.com/bootstrap/bootstrap_modal.asp

使链接打开具有不同内容的“弹出”窗口

1 个答案: