jQueryで作るポップアップウィンドウ「prettyPhoto.js」

webでは、今も昔もポップアップを使いたくなるときがあります。

今回、ちょうどよさげなのがあったのでご紹介。

jQueryで作るポップアップウィンドウ「prettyPhoto.js」

今回は、「モバイルデザインアーカイブのお問い合わせページ」で、iframe版を使用しました。

「サイト掲載依頼」を選択し、表示される『モバイルサイトのデータをアップロードいただけます。』をクリックしてください。

lightbox風の表示で、別のファイルをiframe表示してくれます。

導入は簡単です。

下記のように、jQueryとprettyPhoto.js、CSSを読み込み、prettyPhoto用のスクリプトを読み込みます。

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
 $("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

今回のiframeは下記のようなソースになります。

<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

手軽に実装できますね。

関連するWeb制作・開発Tips

関連リンク