コンテンツをポップアップにして最前面に表示させるのがモーダルウィンドウです。モーダルウィンドウが開いている間は他の操作はできなくなるのが一般的です。

この「Reveal」jQueryプラグインを利用すれば、このモーダルウィンドウが簡単に実現できます。これ以上簡単に設置できる方法はないかもしれません。

サンプルを作ってみました。

モーダルを超絶簡単に設置できるjQueryプラグイン「Reveal」サンプル

1.75KBという軽量で、設置方法も直感的でもわかりやすくなっています。あっという間にモーダルウィンドウが設置できてしまいます。

これは本当に便利です。

設置方法

Reveal: jQuery Modal Pluginからファイルを一式ダウンロードします。

パスに注意して、CSSやjavascriptなど必要なファイルを読み込ませます。

モーダルウィンドウのコンテンツとモーダルウィンドウを開くため記述を以下のように書きます。

このように書くとオプションの設定ができます。よく使うのが、data-animation=”fadeAndPop”(値:fade, fadeAndPop, none)かと思います。

読み込ませるだけでモーダルウィンドウが実現してしまうので、とても簡単です。最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: