web-dev-qa-db-ja.com

Twitter Bootstrap modal：スライドダウン効果を削除する方法

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

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

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

javascriptjqueryjquery-uitwitter-bootstrap
159
ramz15

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

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

<div class="modal fade hide">

に：

<div class="modal hide">

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

348
Rose Perrone

bootstrapで使用されるモーダルは、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;
}

デモ

36
Andres Ilich

スライドインではなくモーダルフェードインを使用したい場合（とにかく.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クラスを削除してください。

30
lorem monkey

これらの答えのほとんどはbootstrap 2に対するものだと思います。bootstrap 3についても同じ問題にぶつかり、修正を共有したいと思いました。 bootstrap 2に対する以前の回答と同様に、これは不透明度のフェードを行いますが、NOTはスライド遷移を行います。

ワークフローに応じて、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%に変更します。

24
viggity

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

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

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

18
Alex Bain

スライドを削除するがフェードを残すという最良の解決策を見つけました。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;
}
11
justinazz

スライド効果も好きではありませんでした。これを修正するには、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%;
}

bootstrap 3の答えを探している場合は、 こちらをご覧ください

11
viggity

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

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

2
Amr Morsy

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

2
Kapil Kumar

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;
}
1
Konstantin XFlash Stratigenas

bootstrap 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は残りません。

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

質問は明確でした：remove onlyスライド：Bootstrap v3で変更する方法は次のとおりです。

Modals.lessで、変換ステートメントをコメントアウトします。

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

次のCSSが機能します-Bootstrapを使用します。3。boostrapスタイルの後にこのCSSを追加する必要があります-

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

.modal.fade {
   transition: none; 
}
0
Ignacio Vazquez

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

スライドエフェクトを削除しますが、フェードインを維持します。bootstrap 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)*/}
0
timothymarois