Bootstrap 模态行为异常答案

【问题标题】：Bootstrap Modals misbehavingBootstrap 模态行为异常
【发布时间】：2012-05-27 03:53:07
【问题描述】：

我正在尝试将 BootStrap 模式添加到现有页面，但遇到了以下问题：

模态显示完全符合我的预期，内容看起来非常漂亮，但我有两个问题。如果我只指定class="modal"，则模式在页面加载时默认显示并且不会关闭。如果我包含class="modal hide"，则模式不会在页面加载时显示，但在单击相应按钮时也不会关闭。

我并没有与 Bootstrap 网站上的 modals sample code 大相径庭，知道出了什么问题吗？

这是应该启动模式的按钮：

<a class="btn" data-toggle="modal" href="#testmodal" >About</a>

这是模态本身：

    <div class="modal hide fade in" id="testmodal">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">x</button>
            <h3>Modal Header</h3>
        </div>
        <div class="modal-body">
            <p>body</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
        </div>
    </div>

为了记录，是的，我确实记得包含 bootstrap-modal.js 和 bootstrap-transition.js

【问题讨论】：

你确定 jquery 和 bootstrap 加载正确吗？打开控制台（firebug 或 chrome 控制台）并确保您没有收到任何错误。
@geoffreydv 你应该回答这个问题，这样我才能接受。尽管出于某种原因我在 Bootstrap 的下载页面上明确选择了这些模块，但它们实际上并没有在 zip 中。我不得不从 GitHub 下载所有内容并手动放置文件 - 不知道为什么会发生这种情况......无论如何这是问题所在，谢谢！~

标签： html css twitter-bootstrap modal-dialog

【解决方案1】：

您的关闭链接应该是这样的：

<a class="close" data-dismiss="modal">×</a>

因为 data-dismiss 是一个自定义的 HTML5 数据属性。这里用来关闭模态窗口。

【讨论】：

【解决方案2】：

很高兴您的问题得到解决。

此外，如果您想要默认引导功能而不需要自定义任何内容，只需使用主页上的大下载按钮即可。这个 zip 文件包含一个默认的 bootstrap.min.js 文件，其中包含所有插件（如模式对话框等）。如果您使用该文件而不是所有单独的 javascript 文件，您的页面必须发出更少的请求并加快加载速度。

【讨论】：