4

私は独学で Web デザインを学んでおり、現在は Twitter ブートストラップのモーダル JavaScript プラグインで遊んでいます。

modal-login という名前の新しいモーダル クラスを作成しました。これは、モーダル ウィンドウ内のログイン フォームです。うまく機能していますが、フェード効果/スライド ダウンが機能しません。モーダル ボックスを上から中央に下げる効果。

私はまだ JavaScript と jQuery について深く理解していません。

私の質問は、bootstrap-modal.js ファイルを編集して、modal-login および modal-register という名前の新しいモーダル クラスを含めることができるかどうかです。モーダルフェードイン効果を利用できるようにするには？

4

1 に答える 1

3

bootstrap-modal.jsファイルを編集する必要はありません。fadeクラスをモーダルに追加してから、いくつかの CSS ルールを追加するだけです。

例えば：

.modal-login.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
      -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal-login.fade.in {
  top: 50%;
}

modal新しいクラスに単純なクラスを保持し、新しいクラスを使用してオーバーライドを行う場合は、さらに良いでしょう。そうすれば、上記の CSS を複製せずに継承できます。

于 2012-08-03T18:32:04.087 に答える