Question

这些都是我链接的Javascript文件：

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="bootstrap/docs/assets/js/jquery.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-transition.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-button.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-affix.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>
    <script src="bootstrap/docs/assets/js/holder/holder.js"></script>
    <script src="bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
    <script src="bootstrap/assets/js/application.js"></script>

这些都是我链接的CSS文件：

<link href="css/bootstrap.min.css" rel="stylesheet" media="all" /> 
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/style.css" rel="stylesheet" media="all" />

这是我的模特：

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

我遇到的问题是，当我点击按钮启动模型时，它只会在我的屏幕上弹出1秒然后消失。出于某种原因，它不会停留在屏幕上。

Answer 1

嘿，它对我来说很好。 Jsfiddle demo

您需要添加bootstrap.css或bootstrap.min.css。

中的任何一个

实际上bootstrap.min.css只是bootstrap.css的压缩版本。

您无需添加所有javascript文件。

一个基本的例子：

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" media="all" /> 

<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

要测试它，只需将上面的代码复制到文本编辑器中并保存为**.html，然后在某些浏览器上打开它

Answer 2

我发现了我的问题。我需要删除

<script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>

猜猜你不能包含bootstrap.min.js

Twitter Bootstrap 2.3.2模型不停留在屏幕上

2 个答案:

一个基本的例子：