3種類のズーム設定が可能なシンプルなポップアップを提供します。 1 — 水平・垂直方向のフィット、 2 — 水平方向のみフィット、 3 — マージンなし、ズームアニメーション、右上閉じるボタン。

各ギャラリーアイテムに任意のHTMLコンテンツを追加し、コンテンツタイプを混在させることができます。この例では、画像は移動方向に基づいてプリロードされます。タッチスワイプサポートの追加については、Smashing Magazineの記事を参照してください。

画像が完全に読み込まれた後にのみポップアップを開きたい場合は、JavaScriptで画像をプリロードできます。または、サムネイルの代わりに縮小版画像を使用します。ズーム効果は現在、画像のみをサポートしています。

この例では、ライトボックスは小さな画面サイズで自動的に無効になり、リンクのデフォルトの動作がトリガーされます。

アニメーションは簡単なCSSトランジションで追加されます。デザインは自由に変更できます。その他のアニメーションについてはCodePenをご覧ください。

ダイアログ例

これはダミーのコピーです。読むためのものではありません。完成した、組版されたテキストの外観と感触を示すためだけに配置されています。表示用です。ここに意味を求める人は、ひどく失望するでしょう。

入力された情報はポップアップを閉じても失われません。他のページに移動して戻るボタンを押しても保持されます。

ポップアップの表示内容は完全に制御可能です。CSSで任意の側面に配置したり、ウィンドウの右側スクロールを有効/無効にしたりできます。すべてあなたの思い通りです。

モーダルポップアップでは、通常の閉じる方法は無効になります。

これはエラーメッセージを表示する基本的な例です。もちろん、テキストやスタイルは変更できます。

例