jQueryでのポップアップウィンドウといえば、ThickboxやLightBoxの様なモーダルウィンドウタイプが主流になってきていますが、そうではない単純な『target=”_blank”』『window.open』タイプのブラウザ別枠型ポップアップウィンドウ(ウィンドウサイズの指定やウィンドウリサイズ指定有り)をjQueryで実現させる方法の紹介。
サンプルでは指定を加えるリンクに対してclassを付ける構成にしておきます。
(リンクに対してclass=”popup”を付けたものに対して指定を効かせます。)
HTMLは以下のような記述に。
◆HTML <a href="リンク先" class="popup">リンクテキスト</a>
そしてスクリプトの記述は以下。
◆SCRIPT $(function() { $(".popup").click(function(){ window.open(this.href,"WindowName","width=600,height=500,resizable=yes,scrollbars=yes"); return false; }); });
単純にJavaScriptの『window.open』を呼び出すだしているだけ。
『width』と『height』の値を変更することで枠のサイズは変更できます。
言うまでもないかもしれませんが『resizable=yes』や『scrollbars=yes』の値を変えればポップアップするウィンドウのリサイズの不可、スクロールバーの不可を変更できます。
◆サンプル(Googleサイトを幅650px高さ500pxでポップアップ)
≫Google
もちろんclassを付ける構成ではなく、IDで囲ったエリアなど特定のリンク要素に指定を加えることも可能です。
ソース内にJavaScriptの記述をゴチャゴチャ書く必要がないので、jQueryを使って構成しているサイトではこの方法を使ったほうが便利な気がします。
ご参考までに。。。