Bootstrap模态不会出现

Question

I'm just trying to get the tutorial sample modal to show. 我只是想让教程示例模式显示出来。 I have the exact code from the tutorial and my file references are correct. 我有教程中的确切代码，我的文件引用是正确的。 Ive even tried adding the javascript modal.show thing. 我甚至尝试添加javascript modal.show的东西。

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>

</head>
<body>

<!-- Button trigger modal -->
<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" 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 -->

</body>
  </html>

Answer 1

Try loading the js/bootstrap.min.js file after the jquery files. 尝试在jquery文件之后加载js/bootstrap.min.js文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Answer 2

bootstrap.min.js requires jQuery to work properly. bootstrap.min.js要求jQuery正常工作。

Here, I tidied up your code and fixed the error (probably): 在这里，我整理了你的代码并修复了错误（可能）：

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>

    <body>
        <!-- Button trigger modal -->
        <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" 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 -->
    </body>

</html>

Bootstrap模态不会出现

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-12-07 00:48:37

解决方案2
1 2013-12-07 00:52:43

Bootstrap模态不会出现

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-12-07 00:48:37

解决方案2 1 2013-12-07 00:52:43

解决方案1
2 已采纳 2013-12-07 00:48:37

解决方案2
1 2013-12-07 00:52:43