Twitterブートストラップモーダル：スライドダウン効果を削除する方法

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

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

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

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

具体的には、次のように変更します。

<div class="modal fade hide">

に：

<div class="modal hide">

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

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

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

ご覧のとおり、このモーダルにはのクラスがあります。つまり、.fadeフェードインとに設定さ.inれています。つまり、スライドインします。そのため、削除するエフェクトに関連するクラスを削除します.in。この場合、クラスは単なるクラスです。

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

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

デモ

スライドインではなくモーダルフェードインが必要な場合（.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は、モーダルクラスからクラスを削除してください。

これらの回答のほとんどはブートストラップ2に関するものだと思います。ブートストラップ3についても同じ問題が発生し、修正を共有したいと思いました。ブートストラップ2に対する私の以前の回答と同様に、これは依然として不透明度のフェードを行いますが、スライドの遷移は行いません。

ワークフローに応じて、modals.lessファイルまたはtheme.cssファイルを変更できます。少ない時間で質の高い時間を過ごしたことがない場合は、ぜひお勧めします。

少ない場合は、次のコードを見つけてください MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

その後、変更-25%に0%

または、cssのみを使用している場合は、次の場所を探しますtheme.css：

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

をに変更-25%し0%ます。

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

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

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

スライドを削除するがフェードを残す最良の解決策は、bootstrap.cssの後に呼び出される、選択したcssファイルに次のcssを追加することです。

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

スライド効果も気に入らなかった。これを修正するには、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の答えを探している場合は、こちらをご覧ください

「top：-25％;」を削除するだけで、bootstrap.cssを上書きすることもできます。

削除すると、モーダルはスライドアニメーションなしで単純にフェードインおよびフェードアウトします。

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

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

私は自分のlessでデフォルトのBootstrapのLessコードをこれでオーバーライドします：

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

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

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

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

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

&.fade .modal-dialog {
  //   .translate(0, -25%);

http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/を見てください

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

これを更新したかった。あなたのほとんどはこの問題を完了していません。私は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)*/}

次のCSSは私のために動作します-Bootstrap 3を使用します。ブーストラップスタイルの後にこのCSSを追加する必要があります-

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

モーダルクラスから「フェード」クラスを削除するだけです

class="modal fade bs-example-modal-lg"

なので

class="modal bs-example-modal-lg"