Question

我试图在一个页面中添加2个引导模态。但我无法添加它，只有一个模态正在工作。我需要为两个按钮添加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>

在单个页面中添加两个引导模式

1 个答案: