Question

我正在使用Bootstrap网站上提供的模板模式但由于某种原因它无法正常工作。按钮显示手形图标，所以我知道我的CDN是正确的。我哪里错了？

<a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> My information</a>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"> Enter your information</h4>
      </div>
        <div class="modal-body">
        <h4> Text about you</h4>    
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

错误在您的按钮内。您需要将data-toggle设置为modal并将data-target设置为模式的ID，即。 #myModal。

<a role="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">
    <span class="glyphicon glyphicon-hand-up"></span> My information
  </a>
  <div class="modal fade" role="dialog" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"> Enter your information</h4>
        </div>
        <div class="modal-body">
          <h4> Text about you</h4>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

请参阅工作示例here。

Answer 2

确保您的js文件的顺序是这样且存在的

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

好像你还没有包含jquery文件。这是一个jsfiddle

Bootstrap模式不起作用，不弹出

2 个答案: