1

我正在尝试将 BootStrap 模式添加到已经存在的页面中，但遇到了以下问题：

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

我没有与 Bootstrap 网站上的模态示例代码有任何大的不同，有什么想法吗？

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

<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

4

2 回答 2

1

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

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

于 2012-05-20T20:31:09.397 回答
0

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

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

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

于 2012-05-20T11:02:35.943 回答