在单个页面中添加两个Bootstrap模态框

Question

我正在尝试在一个页面中添加两个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>[e-mail]</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

- user7397787

Answer 1

你在两个地方使用了同一个ID，每个页面只能引用一次ID，并且你还没有将data-toggle="modal"应用于你的href。

请参考模态框。

有效示例：

<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>[e-mail]</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>

- vanburen