user3193631 user3193631 - 4 months ago 12
CSS Question

Bootstrap Modals - Modal id's different yet only one appears correctly

I'm having trouble with these modals in bootstrap. I have set the id for both differently yet only the first one appears when the "more" button is pressed. The second button does not show the required modal.



<div id="tf-team" class="text-center">
<div class="overlay" id="team1">
<div class="container">
<div class="section-title center">
<h4>Something</h4>
<h2 class="white">The Team</h2>
<img src="img/daag.png" alt="">
</div>
</div>
<div id="team" class="owl-carousel owl-theme row">
<!-- Team One -->
<div class="item">
<div class="thumbnail">
<img src="img/team/01.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>CEO name</h3>
<p class="blue">CEO</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button>
</div>
</div>
</div>

<!-- Team Two -->
<div class="item">
<div class="thumbnail">
<img src="img/team/03.jpg" alt="..." class="img-circle team-img">
<div class="caption">
<h3>Marketing Executive name</h3>
<p class="blue">Marketing Executive</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button>

</div>
</div>
</div>





These are the modals that should be appearing. The first modal appears as normal but the second doesn't even though the ID's are different.



<!-- Modal One-->
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">text</h4>
</div>
<div class="modal-body">
<p><strong>text</strong></p>
<p>text</p>

<p><strong>text</strong></p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal Two-->
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Dana</h4>
</div>
<div class="modal-body">
<p><strong>text</strong></p>
<p>text
</p>
<p><strong>text Tick</strong></p>
<p>text
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>





Does anyone have any ideas as to why this is happening?

Answer

You are just missing two closing </div> tags on the first modal.

<script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
  <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<div id="tf-team" class="text-center">
    <div class="overlay" id="team1">
      <div class="container">
        <div class="section-title center">
          <h4>Something</h4>
          <h2 class="white">The Team</h2>
          <img src="img/daag.png" alt="">
        </div>
      </div>
      <div id="team" class="owl-carousel owl-theme row">
        <!-- Team One -->
        <div class="item">
          <div class="thumbnail">
            <img src="img/team/01.jpg" alt="..." class="img-circle team-img">
            <div class="caption">
              <h3>Jim Rae</h3>
              <p class="blue">CEO</p>
              <button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">More</button>
            </div>
          </div>
        </div>

        <!-- Team Two -->
        <div class="item">
          <div class="thumbnail">
            <img src="img/team/03.jpg" alt="..." class="img-circle team-img">
            <div class="caption">
              <h3>Dana Apatachioae</h3>
              <p class="blue">Marketing Executive</p>
              <button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">More</button>

            </div>
          </div>
        </div>
        <!-- Modal One-->
        <div id="myModal1" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">text</h4>
              </div>
              <div class="modal-body">
                <p><strong>text</strong>
                </p>
                <p>text</p>

                <p><strong>text</strong>
                </p>
                <p>text
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
            <!-- You are missing these two ending </div> tags. -->
          </div>
        </div>

        <!-- Modal Two-->
        <div id="myModal2" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Dana</h4>
              </div>
              <div class="modal-body">
                <p><strong>text</strong>
                </p>
                <p>text
                </p>
                <p><strong>text Tick</strong>
                </p>
                <p>text
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>