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を使って構成しているサイトではこの方法を使ったほうが便利な気がします。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (3)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner