Question

我已经创建了几个与按钮相关联的模态，但是虽然我有不同的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按钮也是如此。我无法想出原因。

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

从这里我看到你只是尝试午餐两个简单的模态所以所有的javascript或jquery函数已经在bootstrap.min.js中。

Bootstrap模态 - 尽管使用正确的ID，但总是调用相同的模态

1 个答案: