167

Twitter Bootstrap Modal ウィンドウのアニメーションをスライドダウン効果からフェードインに変更する方法、またはスライドなしで表示する方法はありますか? ここでドキュメントを読みました：

http://getbootstrap.com/javascript/#modals

しかし、モーダルなボディ スライド効果を変更するためのオプションについては言及されていません。

4

16 に答える 16

364

fadeモーダルdivからクラスを取り出すだけです。

具体的には、以下を変更します。

<div class="modal fade hide">

に：

<div class="modal hide">

更新： bootstrap3の場合、hideクラスは必要ありません。

于 2012-08-03T22:05:14.950 に答える
36

ブートストラップで使用されるモーダルは CSS3 を使用して効果を提供し、モーダル コンテナー div から適切なクラスを削除することで削除できます。

<div class="modal hide fade in" id="myModal">
   ....
</div>

ご覧のとおり、このモーダルには のクラスがあり.fade、フェードインに設定されていることを.in意味し、スライドインすることを意味します。したがって、削除したい効果に関連するクラスを削除するだけです。あなたの場合は.inクラスだけです。

編集:いくつかのテストを実行したところ、そうではないようです。.inクラスはjavascriptによって追加されますが、次のようにcssでslideDownの動作を変更できます:

.modal.fade {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

デモ

于 2012-04-13T15:13:28.590 に答える
30

モーダルをスライドインではなくフェードインしたい場合 (なぜそれが呼び出される.fadeのですか?)、CSS ファイル内のクラスを上書きするか、次のように直接指定できますbootstrap.css。

.modal.fade{
    -webkit-transition: opacity .2s linear, none;
    -moz-transition: opacity .2s linear, none;
    -ms-transition: opacity .2s linear, none;
    -o-transition: opacity .2s linear, none;
    transition: opacity .2s linear, none;
    top: 50%;
}

効果が必要ない場合はfade、モーダル クラスからクラスを削除するだけです。

于 2012-08-15T22:06:07.563 に答える
18

.modal.fade私は自分のLESSスタイルシートのデフォルトスタイルをオーバーライドすることでこれを解決しました：

.modal {
  &.fade {
    .transition(e('opacity .3s linear'));
    top: 50%;
  }
  &.fade.in { top: 50%; }
}

これにより、フェードイン/フェードアウトアニメーションは保持されますが、スライドアップ/スライドダウンアニメーションは削除されます。

于 2012-10-23T22:30:39.577 に答える
11

スライド効果も気に入らなかった。これを修正するには、top属性を .modal.fade と modal.fade.in の両方で同じにするだけです。トランジションでを外すこともできますがtop 0.3s ease-out、そのままにしておいても害はありません。フェードイン/アウトが機能し、スライドを殺すだけなので、このアプローチが気に入っています。

.modal.fade {
  top: 20%;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
}

.modal.fade.in {
  top: 20%;
}

ブートストラップ 3 の回答をお探しの場合は、こちらをご覧ください

于 2013-03-29T04:16:07.623 に答える
3

フェード クラスを削除するだけで、モーダルでさらにアニメーションを実行したい場合は、モーダルで animate.css クラスを使用するだけです。

于 2015-11-16T05:54:33.690 に答える
1

私はブートストラップ 3 と Durandal JS 2 モーダル プラグインを使用しています。この質問は Google の検索結果の最上位にあり、上記の回答のどれも役に立たなかったので、将来の訪問者のために解決策を共有したいと思いました。

デフォルトの Bootstrap の Less コードを自分の less でオーバーライドします。

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

そうすれば、フェード効果だけが残り、slideDown はありません。

于 2014-05-01T09:45:41.353 に答える
1

問題は明確でした: スライドのみを削除します: Bootstrap v3 でスライドを変更する方法は次のとおりです。

modals.less で、translate ステートメントをコメントアウトします。

&.fade .modal-dialog {
  //   .translate(0, -25%);
于 2015-06-18T03:29:36.877 に答える
0

これを更新したかった。あなたのほとんどは、この問題を完了していません。Bootstrap 3 を使用しています。上記の修正はどれも機能しませんでした。

スライド効果を削除しますが、フェードインを維持します。ブートストラップ css に入り、(次のセレクターに注意してください)-これで問題が解決しました。

 .modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}

 .modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}
于 2014-02-14T02:47:58.897 に答える