4

我有一个非常简单的 HTML 应该打开一个淡入淡出的模式，但它只显示和隐藏而不会淡入或淡出。

这是代码：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-modal.js"></script>
    </head>
    <body>
        <div id="myModal" class="modal hide fade">
            <div class="modal-header"><h4>I'm a header</h4></div>
            <div class="modal-body"><p>Hello from the 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>

        <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch Modal</a>
    </body>
</html>

此代码取自 Twitter Bootstrap 文档。

在 jsFiddle 中，这个简单的代码效果很好！但是，如果我将上述代码（如 .html）保存在包含所有必需文件（.css 和 .js）的文件夹中，模态将以简单的方式打开，不会褪色！

我究竟做错了什么？

提前致谢。

4

3 回答 3

7

那是因为模态效果是 CSS3 效果，并且您不包括处理它的插件，所以只需bootstrap-transition.js在模态插件之前加载插件，它应该可以工作。

于 2012-10-04T20:32:52.273 回答
1

仅使用 bootstrap-modal.js 时，我的体验与您相同。但是当我使用编译的 bootstrap.js 时它可以工作

于 2012-10-04T18:25:38.333 回答
0 
.modal.in .modal-dialog {-moz-transform: translate(0,0) !important;}

将此添加到您的CSS

于 2015-03-04T09:10:32.357 回答