WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryで「window.open」タイプのポップアップウィンドウ方法

jQueryでのポップアップウィンドウといえば、
ThickboxやLightBoxの様なモーダルウィンドウタイプが主流になってきていますが、
そうではない単純な『target=”_blank”』『window.open』タイプのブラウザ別枠型ポップアップウィンドウ
(ウィンドウサイズの指定やウィンドウリサイズ指定有り)をjQueryで実現させる方法の紹介。

サンプルでは指定を加えるリンクに対してclassを付ける構成にしておきます。
(リンクに対してclass=”popup”を付けたものに対して指定を効かせます。)

HTMLは以下のような記述に。

[html]
◆HTML
リンクテキスト
[/html]

そしてスクリプトの記述は以下。

[javascript]
◆SCRIPT
$(function() {
$(“.popup”).click(function(){
window.open(this.href,”WindowName”,”width=600,height=500,resizable=yes,scrollbars=yes”);
return false;
});
});
[/javascript]

単純にJavaScriptの『window.open』を呼び出すだしているだけ。
『width』と『height』の値を変更することで枠のサイズは変更できます。
言うまでもないかもしれませんが『resizable=yes』や『scrollbars=yes』の値を変えれば
ポップアップするウィンドウのリサイズの不可、スクロールバーの不可を変更できます。

◆サンプル(Googleサイトを幅650px高さ500pxでポップアップ)
Google

もちろんclassを付ける構成ではなく、IDで囲ったエリアなど特定のリンク要素に指定を加えることも可能です。

ソース内にJavaScriptの記述をゴチャゴチャ書く必要がないので、
jQueryを使って構成しているサイトではこの方法を使ったほうが便利な気がします。

ご参考までに。。。

jQueryで「window.open」タイプのポップアップウィンドウ方法」への3件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です