色んなエフェクトが簡単にできるjQuery Customboxを使ったモーダルウィンドウ表示

custombox.js

モーダルウィンドウってなに?

モーダルウィンドウとは、あるウィンドウの子ウィンドウとして表示し、ユーザーがそれに対して何かしらの応答をしない限り、親ウィンドウに戻さないというユーザーインターフェイスのひとつ。何かの注意事項や緊急のお知らせなどを通知する際によく使用されたりします。

 

デモサンプル

1.「jquery.custombox.js」をダウンロード

jQuery Custombox v1.1.2より、「jquery.custombox.js」と「jquery.custombox.css」をダウンロードします。

 

2.JavaScriptとCSSを読み込む

jQuery本体(v1.7以上)、jquery.custombox.js、jquery.custombox.cssを</body>の直前に読み込みます。

 

3.JavaScriptプラグインを読み込む

<body>~</body>に読み込みます。

 

4.HTMLを記述

 

5.レイアウト用のCSSも読み込んでおきます。

 

以上になります。

様々なオプション設定が可能になっているプラグインですので、好みのスタイルを選んで遊んでみるといいかもしれません。

タイトルとURLをコピーしました