css - Bootstrap Modals - Modal id 不同但只有一个正确显示

Question

我在 Bootstrap 中遇到这些模态问题。我已经为两者设置了不同的 id，但是当按下“更多”按钮时只有第一个出现。第二个按钮没有显示所需的模式。

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

这些是应该出现的模式。第一个模态显示正常，但第二个模态显示不正常，即使 ID 不同。

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

有人知道为什么会这样吗？

Answer 1

您只是缺少两个关闭 </div>第一个模态上的标签。

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