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 では、この単純なコードがうまく機能します。しかし、必要なすべてのファイル (.css および .js) を含むフォルダー内に上記のコードを .html のように保存すると、モーダルは色あせずに簡単に開きます!

私は何を間違っていますか？

前もって感謝します。

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 に答える