5

FancyBox を組み込んだ最近のプロジェクトでは、全体的に満足しています。友人は、Twitter の Bootstrap フレームワークの一部として jQuery モーダル プラグインを検討することを勧めました。このプラグインを使用したことがあり、コメントできる人はいますか? 長所、短所はありますか？

4

3 に答える 3

6

専門家にとっては、ブートストラップに既に含まれているため、サイト全体で一貫したスタイルを維持することができ、大きな変更を加える必要はありません。ブートストラップ モーダル プラグインは、CSS3 トランジションを利用して効果を提供するため、パフォーマンスがさらに向上し、サイズが小さいことと相まって、非常に高速なソリューションです。ブートストラップ モーダルは簡単に使用でき、よく文書化されているため、迷子になることはありません。

欠点は何ですか？モーダルの幅と位置を制御することはできません。固定コンテナー内に CSS で配置されているため、必要に応じて CSS を変更する必要があります。複数の異なるサイズが必要な場合、これは醜くなる可能性があります。ページにロードするモーダル。js または css に大幅な変更を加えないと、モーダルを画面の垂直方向/水平方向の中央に配置することはできません。iframes/videos/images のような他のメディアは、ハックなどを必要とせずに簡単にロードすることはできません。効果に CSS3 トランジションを使用することでブートストラップ モーダルがもたらす追加の利点とパフォーマンス ブートについては前に述べましたが、古いブラウザーはこれらの方法をサポートしていないため、プレゼンテーション効果がないため、これはもろ刃の剣です。効果について言えば、

私はfancyboxに行きます.あなたのお金にもっと価値があります.bootstrapモーダルプラグインはまだ若く、将来のリリースでは残りに追いつくでしょう.

于 2012-05-01T15:45:55.077 に答える
5

ファンシーボックスの長所：

  • 箱から出してすぐに、より多くのメディアをサポートします。

ブートストラップの長所:

  • 商用利用は無料 - Apache License 2.0、Fancybox 2.x は CC BY-NC 3.0 Licensed です。
  • すでにほとんどのプロジェクトに含まれています。
  • 必要に応じて変更および拡張するのは非常に簡単です。
  • 継続的かつ一貫した更新。
  • よりクリーンなコード。ファンシーボックスのコードには悪い習慣がたくさんあります (ブラウザー エージェントのスニッフィング、減価償却済みの jQuery 呼び出しの使用、古い IE サポートのバグ)。
  • 重い作業の大部分に CSS を多用し、よりスムーズに、より小さく、より高速にします。
  • CSS によって制御されるため、モーダルの外観全体を非常に簡単に制御できます。

おそらくブートストラップは 5 月から大幅に変更されましたが、私は 2012 年 8 月から使用しているので、モーダルの幅/高さ/センタリングを制御するのが難しいことについて Andres llich が言ったことのほとんどはなくなったと言えます。 、または単に CSS をよく理解していない可能性が高いです。コンテナーはユーザーが指定するものであり、ID を持つことができます。「オーバーライド」したい CSS は、ID を指定してから適切なクラスを指定するのと同じくらい簡単です。次に例を示します。

#citymodal {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 80%;
    margin-left: -167px;
    width: 334px;
    padding-bottom: 40px;
    min-height: 150px;
}

これにより、都市のモーダルは幅 334 ピクセルになり、水平方向に中央揃えになります。同様に簡単に垂直方向に中央に配置することもできますが、この特定のボックスはクライアントの高さに反応し (80%)、クライアントの表示高よりも常に大きくなります (「常に」のすべてのサンプルでは、​​スタックされた 30 インチの Retina モニターが 8+ 未満である場合)。垂直またはそれ以下)。

于 2013-02-15T18:09:27.397 に答える