Bootstrap - Modal不工作?

时间:2013-12-14 18:37:10

标签: jquery html css twitter-bootstrap twitter-bootstrap-3

我对Bootstrap和网页设计一般都很新。 我只是不明白为什么Bootstrap中的某些东西不起作用! 我目前正在尝试使用模态。

触发:

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

模态:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我已经尝试制作自己的Modal并且它不起作用,所以我甚至只是从Stack Overflow文章中删除了这段代码,它似乎对我没用。

为什么它不起作用?

脚本:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/init.js"></script>

2 个答案:

答案 0 :(得分:1)

假设您正在使用Bootstrap 3,正如此代码所示,代码是正确的。您是否在页面标题中包含了bootstrap.js或bootstrap.min.js资产?模态需要这些js文件中的任何一个。

答案 1 :(得分:1)

这个解决方案肯定会有用,但这不是一个好主意, 据我所知,你想在锚点上显示模态。只做一件事。 在锚上点击使用此..

$(function(){
  $('.btn-lg').click(function(){
    $('#myModal').toggleClass('in');
  });
});

如果您愿意,请告诉我,如果您愿意,我会创建一个代码段。