Question

我有一个非常简单的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 docs。

在jsFiddle这个简单的代码非常棒！但是如果我将上面的代码保存在一个包含所有必需文件（.css和.js）的文件夹中，那么模态就会以简单的方式打开，而不会褪色！

我做错了什么？

提前致谢。

Answer 1

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

Answer 2

当只使用bootstrap-modal.js时，我的体验和你一样。但是当我使用编译的bootstrap.js

时它会起作用

Answer 3

.modal.in .modal-dialog {-moz-transform: translate(0,0) !important;}

将此添加到您的css

Twitter Bootstrap Modal不会褪色

3 个答案: