5

これは私を完全に困惑させました。CSS を微調整して、開始位置と終了位置を同じに変更することで、通常のブートストラップ モーダルがスライドせずにフェードインするようにしました。

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

その結果、適切な段階的な外観が得られました。

ブートストラップの modal.js を拡張する Bootstrap Image Gallery によって作成されたイメージ ギャラリー モーダルに対して同じ効果を実現したいと考えています。ここで見つけることができます。機能面では非常に魅力的ですが、この 1 週間、私は js と css をいじってみましたが、移行を単純化することはできませんでした。私の人生では、各画像をフェードインさせる方法を理解できませんが、下にスライドしたり横切ったりするのではなく、その場に収まります。これは本当に気が散ります。

私ができることは、「フェード」クラスを削除して、移行を完全に排除することだけです。他のモーダルに対して行った css の変更はギャラリー モーダルにも適用されると思っていましたが、そうではありません。bootstrap.js のソース コードも調べましたが、わかりません。私は完全なヌーブではありませんが、js/css の専門家にはほど遠いので、ここで手を貸す必要があります。ありがとう！

4

1 に答える 1

1

CSS ルールが上書きされている理由を確認するために、Chrome 開発者ツールまたは Firebug から始めます。Chrome を搭載した Mac では、検査したい要素の上にいるときに、コントロールを押したままマウス/スクロール ボックスをクリックします (これにより、[要素の検査] をクリックするダイアログが開きます)。これにより開発者ツールが開き、クリックした要素 (この場合は.modal-gallery.

この modal-gallery のソース コードを確認したところ、CSS でこのコードが bootstrap.min.css:682 にあることに気付きました。

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

画面のサイズ変更時に、bootstrap.responsive.css:10 の次のコードで上書きできます。

modal.fade.in {
  top: auto;
}

もう 1 つの提案は、bootstrap-image-gallery.css ファイルを確認することです。ギャラリーには、.modal-galleryTwitter Bootstrap 自体には存在しないクラスが適用されているためです。

于 2012-05-04T02:32:07.493 に答える