[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

sponsors

top of page

©2018 coliss