Question

我正在尝试将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

Answer 1

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

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

Answer 2

你的密切链接应该是这样的：

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

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

Bootstrap Modals行为不端

2 个答案: