twitter-bootstrap - 在单个页面中添加两个 Bootstrap 模式

Question

我正在尝试在单个页面中添加 2 个 Bootstrap 模态。但是我无法添加它，只有一个模态在工作。我需要为两个按钮添加 2 个模态。我做错了什么？谁能帮我？

<div class="container">

  <div class="col-lg-12 col-md-12 col-xs-12 padding">
    <div class="col-lg-6 col-lg-6 col-xs-12">
      <button class="addFavourite" data-toggle="modal" data-target="#myModal">Add Favourite</button>
    </div>
  </div>

  <div class="col-lg-12 col-md-12 col-xs-12 smsDetails">
    <a href="#addFavourite" class="col-lg-6 col-md-6 col-xs-6">Send SMS</a>
  </div>

  <div class="col-lg-12 col-md-12 col-xs-12 smsDetails">
    <div class="modal fade " id="myModal" role="dialog" aria-labelledby="post-comment">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <label>To:</label><span>ms.tech10@gmail.com</span>
            <br>
            <label>Message:</label>
            <textarea rows="10" cols="70"></textarea>
            <button>Send Message</button>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="addFavourite">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <h4 class="popupHead">Add Load Route to Favourite</h4>
            <p>This is a unique feature available only for registered users that allows user to repost the posted load for the given route again and again without the hassle to repost the load. This is helpful if the user has same load requirement frequently.
              </p>
            <div>
              <input type="radio" name="day">1 day
              <input type="radio" name="day">2 day
              <input type="radio" name="day">3 day
            </div>
            <p><strong>Note:</strong> The load will be reposted repeatedly till the time same is not removed from favourite list.</p>
            <button class="favouriteConfirm">Add to Favourite and Confirm</button>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

完整代码在这里:jsFiddle

Answer 1

您使用的是相同的 ID对于这两种情况，您每个页面只能引用一次 ID，并且您还没有将 data-toggle="modal" 应用到您的 href。

参见 Modals

工作示例:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="col-xs-12 ">
    <button class="btn btn-default" data-toggle="modal" data-target="#addFavourite">Add Favourite</button>
  </div>

  <div class="col-xs-12 ">
    <a class="btn btn-default" type="button" data-toggle="modal" href="#myModal">Send SMS</a>
  </div>

  <div class="col-lg-12 col-md-12 col-xs-12 smsDetails">
    <div class="modal fade " id="myModal" role="dialog" aria-labelledby="post-comment">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <label>To:</label><span>ms.tech10@gmail.com</span>
            <br>
            <label>Message:</label>
            <textarea rows="10" cols="70"></textarea>
            <button>Send Message</button>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="modal fade" id="addFavourite" role="dialog" aria-labelledby="addFavourite">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <h4 class="popupHead">Add Load Route to Favourite</h4>
            <p>This is a unique feature available only for registered users that allows user to repost the posted load for the given route again and again without the hassle to repost the load. This is helpful if the user has same load requirement frequently.
            </p>
            <div>
              <input type="radio" name="day">1 day
              <input type="radio" name="day">2 day
              <input type="radio" name="day">3 day
            </div>
            <p><strong>Note:</strong> The load will be reposted repeatedly till the time same is not removed from favourite list.</p>
            <button class="favouriteConfirm">Add to Favourite and Confirm</button>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>