画面遷移せずにポップアップを実現できるjQueryプラグイン「prettyPopin」

prettyPopin is a jQuery plugin that serves as a modal box. It is easily customizable and proved a lightweight solution to quickly and easily display content in context. It provides a nice way to display simple content or simple forms.
 

jQueryさえ利用していれば非常に少ない量のコードで簡単に実装でき、
CSSによるデザインのカスタマイズも柔軟に出来るという点で非常に便利です。
(異なるドメインのページを読み込むことは出来ませんが)


導入に当たっては以下のサイトを参考にさせていただきました。

参考

簡単にポップアップを実現するjQueryプラグイン「prettyPopin」 | HAPPY*TRAP



なお、prettyPopin()を呼び出すときの設定については、
公式サイトのドキュメントに仕様がありますが、

prettyPopin documentation | Stéphane Caron – No Margin For Errors

合わせて姉妹プラグイン「prettyPhoto」のドキュメントを読むといろいろ捗ります。

prettyPhoto documentation | Stéphane Caron – No Margin For Errors

「prettyPopin」は「prettyPhoto」の簡易版という感じなのでしょうかね。



おまけ: prototype.jsからjQueryへ

今回このプラグインを使ったのは、
とあるサイトの仕様が変更になったので内部処理を書き直さなくてはならなくなって、
だったらついでにいろいろ変更しよう、というかprototype.jsやめてjQueryにしようなんつて思ったのがきっかけです。

あんまりどっちがどうというのは解りませんが、
中身もそれを利用する時のコードも比較的がっちりせざるを得ないprototype.jsに対して、
jQueryはインターフェイスのデザインが上手というか、便利な機能を便利に使えるように作ってあるなぁという印象。
処理を上手く隠蔽できるようになってるっていうか。
それで別に機能が劣るわけじゃないんで、今さらながら良くできてるなぁと思いますです。

関係している複数のサイトがまだprototype.jsメインで動いているのだけど、
少しずつ切り替えてます…というか、切り替わる頃にまた違うのが出てきそうだけどな!


ちなみに今回作業したサイトは、静的ページ3、動的ページ1の、
ごくシンプルなサイトだったこともあってあっという間に終了。
いつもこういうのだと良いんだけど。