モーダル | ぱんにゃっとTutorial

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

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

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

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

これは本当に便利です。

モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「animatedModal.js」を使うと、小窓ではなくフルスクリーンでモーダルウィンドウが表示されます。

動きもにゅるっと、気持ちいい動きになっています。

フルスクリーンで表示されるので、モーダルで表示させたいコンテンツが多い時などに重宝しそうです。

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

動きは、サンプルを見ていただけるとわかると思います。

ぱんにゃっとTutorial