[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2

jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。

JavaScript Modal Windows – TinyBox2
デモページ

[ad#ad-2]

TinyBox2のデモ

デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。
ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。

デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling

アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング

デモページ：Ajax Post, Fixed Width/Height, Light Mask, Custom Vertical Split

AJAX対応、アニメーション：有り、クローズボタン：有り、幅と高さ：指定、マスク：有り

デモページ：Custom Position, No Mask, Auto-Hide

ポジション：カスタム、マスク：無し、自動で消去

デモページ：iFrame, Blue Mask, Absolute Position, Frameless, Close Callback

iFrame対応、マスク：ブルー、ポジション：absolute、コールバック：クローズ時

[ad#ad-2]

デモページ：Ajax, Advanced Functions

AJAX対応、アドバンスド機能

デモページ：Image, Load Callback

画像対応、コールバック：ロード時

TinyBox2の特徴

• 他のスクリプトに依存しないで、単体でモーダルウインドウを実装
• 超軽量（5KB）
• iFrame, AJAX, 画像もサポート
• デザインはCSSで簡単にカスタマイズが可能
• マスクは不透明度の設定が可能
• ウインドウのサイズは任意・指定が可能
• ウインドウの位置は自由
• クローズはボタン、クリック、キー操作に対応
• コールバック機能
• 数多くのパラメータをオプションで用意

TinyBox2の対応ブラウザ

対応ブラウザは、下記の通りです。

• IE7+
• Firefox
• Chrome
• Safari
• Opera