Bootstrap modal - 总是使用正确的 ID 调用相同的模态答案

【问题标题】：Bootstrap modal - always same modal is called altough using right IDBootstrap modal - 总是使用正确的 ID 调用相同的模态
【发布时间】：2015-05-16 13:26:09
【问题描述】：

我已经创建了多个与一个按钮相关联的模态，但是尽管在这种情况下我有不同的 ID 将一个按钮或一个链接关联到正确的模态，但始终会弹出相同的模态。我有这样的事情：

    <div class="container">

<div class="col-md-6 col-lg-4 text-center" data-toggle="modal">
    <img src="https://upload.wikimedia.org/wikipedia/en/1/13/Toy_Story.jpg" width="220" height="342">
    <h2>Toy Story</h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalKYz2wyBy3kc">
      <span class="glyphicon glyphicon-paperclip"></span> More details!
    </button>
    <button type="button" class="btn btn-primary movie-button-play"
    data-trailer-youtube-id="KYz2wyBy3kc" data-toggle="modal" data-target="#trailer">
      <span class="glyphicon glyphicon-film"></span> Play Trailer
    </button>
    <a href="#myModalKYz2wyBy3kc" class="btn btn-primary movie-button-play"data-toggle="modal">Launch</a>
    <a href="javascript:void(null);" class="btn btn-primary movie-button-play" onclick="launch_modal('myModal1');">Launch Modal</a>
    <p></p><p/><p/>
</div>

<!-- Movie information Modal -->
<div class="modal fade" id="myModal1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Toy Story</h4>
      </div>
      <div class="modal-body">
        <h4>Plot</h4>
        <p>A story of a boy and his toys that come to life</p>
        <h4>Release year</h4>
        <p> 1995</p>
        <h4>Starring</h4>
        <p>Tom Hanks (Woody), Tim Allen (Buzz Lightyear)</p>
        <h4>Director</h4>
        <p>John Lasseter</p>
      </div>
    </div>
    </div>
</div>

<div class="col-md-6 col-lg-4 text-center" data-toggle="modal">
    <img src="https://upload.wikimedia.org/wikipedia/en/b/b0/Avatar-Teaser-Poster.jpg" width="220" height="342">
    <h2>Avatar</h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModald1_JBMrrYw8">
      <span class="glyphicon glyphicon-paperclip"></span> More details!
    </button>
    <button type="button" class="btn btn-primary movie-button-play"
    data-trailer-youtube-id="d1_JBMrrYw8" data-toggle="modal" data-target="#trailer">
      <span class="glyphicon glyphicon-film"></span> Play Trailer
    </button>
    <a href="#myModald1_JBMrrYw8" class="btn btn-primary movie-button-play"data-toggle="modal">Launch</a>
    <a href="javascript:void(null);" class="btn btn-primary movie-button-play" onclick="launch_modal('myModal2');">Launch Modal</a>
    <p></p><p/><p/>
</div>

<!-- Movie information Modal -->
<div class="modal fade" id="myModal2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" arialabel="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Toy Story</h4>
      </div>
      <div class="modal-body">
        <h4>Plot</h4>
        <p>A marine on an alien planet</p>
        <h4>Release year</h4>
        <p> 2009</p>
        <h4>Starring</h4>
        <p>Sam Worthington, Zoe Saldana, Sigourney Weaver</p>
        <h4>Director</h4>
        <p>James Cameron</p>
      </div>
    </div>
    </div>
</div>

代码看起来很长，但很重复，原因是一个例子。这里的问题是，在这两种情况下，第一个模态总是弹出的，在这种情况下是 Modal1，即使我单击 Modal2 按钮也是如此。我想不出原因。

【问题讨论】：

在 bootstrap 中创建 modal 时，只需关注与

标签： twitter-bootstrap bootstrap-modal

【解决方案1】：

我不确定你为什么尝试像这样触发模态：

<a href="javascript:void(null);" class="btn btn-primary movie-button-play" onclick="launch_modal('myModal2');">Launch Modal</a>

我认为你应该这样做：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch modal
</button>

从我在这里看到的内容中，您只需尝试使用两个简单的模式，因此 bootstrap.min.js 中已经存在所有 javascript 或 jquery 函数。

【讨论】：