Bootstrap Modal无法按预期工作

Question

我已经在我的网站上添加了bootstrap模式，但它没有用。有人帮我解决了。感谢。

  <button type="button" class="btn btn-info btn-lg">Update</button>

  <!-- Modal -->
  <div class="modal fade" id="myupdate" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">New Update </h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

缺少数据切换和目标

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myupdate">Open Small Modal</button>

Answer 2

您需要将data-target设置为id的目标modal，将data-toggle = "modal"设置为您要激活模式的button

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<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.5/js/bootstrap.min.js"></script>
<button type="button" data-target="#myupdate" data-toggle="modal" class="btn btn-info btn-lg">Update</button>

  <!-- Modal -->
  <div class="modal fade" id="myupdate" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">New Update </h4>
        </div>
        <div class="modal-body">
          <p>This is a small modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;