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を使って構成しているサイトではこの方法を使ったほうが便利な気がします。
ご参考までに。。。
jQueryでのポップアップウィンドウプラグイン「jquery.popupwindow.js」 - BlackFlag – Web Development Technical | 2010.10.08 19:19
[...] 昨日のエントリー「jQueryで「window.open」タイプのポップアップウィンドウ方法」に引き続き、 jQueryでのポップアップウィンドウのネタ紹介。 [...]
E2 DESIGNERS BLOG:HTML,CSS,JavaScript,jQuery,FlashなどWebデザインに関するネタ紹介/株式会社E2 | 2010.10.31 1:13
jQueryで「window.open」タイプのポップアップウィンドウ方法
jQueryでのポップアップウィンドウといえば、 ThickboxやLightBoxの様なモーダルウィンドウタイプが主流になってきていますが、 そうではない単純な『target="_blank"』『window.open』タイプ…
ブラウザウィンドウをサイズ指定で表示させる | Please remember these . | 2015.03.12 4:29
[...] jQueryで「window.open」タイプのポップアップウィンドウ方法 投稿日: 2015-03-112015-03-11作成者 ay123xカテゴリー 06. jqueryタグ [...]