Bootstrap Modal没有弹出

时间:2016-02-11 18:03:42

标签: html css twitter-bootstrap responsive-design frontend

我正在学习Bootstrap,我只是将一大块Modal组件的代码放入我的项目中。但是,在我运行程序后,我发现它无法工作,按钮没有响应,因为它应该是。所以我只是想知道是否有人可以帮助我呢?我会非常感激的。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

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

4 个答案:

答案 0 :(得分:2)

Bootstrap需要jQuery。如果您要为正在使用的任何浏览器打开开发人员工具,您将在控制台中看到错误。

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>添加到您的HTML

答案 1 :(得分:2)

也许你只是忘了包含bootstrapjs和jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="<your path to js file>bootstrap.js"></script>

答案 2 :(得分:1)

您的代码中没有问题: https://jsfiddle.net/jsfiddleakarsh/6o0spz8g/                                                               启动演示模式                                                         

<div id="navBar">
   <div class="searchBTN"><button class="search closed">S</button></div>
</div>
<div id="search">
   <div class="searchHolder"></div>
</div>

答案 3 :(得分:1)

你忘了jQuery只需添加

&#13;
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
&#13;
&#13;
&#13;