Question

我的模态似乎不起作用。我正在使用bootstrap 3.0.3。我曾经尝试过一次，但它现在似乎没有用。我错过了什么吗？

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

<button class="btn btn-primary pull-right titlebar" data-toggle="modal" data-target="#myModal">
    Upload file
</button>
<!-- Modal -->
<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" 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><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

您可能会从控制台日志中收到此错误：

Uncaught Error: Bootstrap requires jQuery

这是因为twitter bootstrap js需要jQuery才能运行，你需要首先包含jQuery，所以改变：

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Answer 2

脚本包含的顺序是错误的，bootstrap.js依赖于jQuery所以jQuery需要首先包含

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

演示：Fiddle

为什么这个bootstrap模式不起作用？

2 个答案: