JavaScriptでポップアップウィンドウを表示する最小サンプル

ポップアップウィンドウを最も簡単に実現できるのは、JavaScriptのalert関数である。

alertのサンプル

しかしながら、alert関数では表示するテキストをパラメータとして渡せるだけなので、ポップアップウィンドウとは言い難い。

次に簡単に実現できるのは、window.openを利用する方法である。

window.openのサンプル

用途によってはこれでも十分なのだが、要はブラウザの新規ウィンドウを開いているだけなので、ウィンドウの細かい制御はできないし、セキュリティの設定によってはポップアップウィンドウの警告が表示されてしまう場合もある。

現実的な方法としては、jQueryとCSSを使う方法になる。

まず、ページ内に、下記のようにポップウィンドウとして表示するDIVタグを用意しておく。

<div id="popupwindow">
  <div id="popuowindow_message"></div>
  <div id="popupwidow_close">OK</div>
</div>

このままでは、DIVタグの中身が丸見えなので、スタイルシートで下記のように非表示にしておく。

#popupwindow {
  display: none;
}

JavaScript側では、下記のように記述する。

$("#popupwindow3").click(function(e){
  $('#popuowindow_message').text('こんにちは!');
  $('#popupwindow').css({top: 400, left: 20}).fadeIn(100);
  $('#popupwidow_close').click(function() {$('#popupwindow').fadeOut(100);});
  return false;
});

1. メッセージのテキストを設定。
2. ポップアップウィンドウの表示。
3. OKがクリックされた場合にウィンドウを非表示。

popup windowで表示するサンプル

最小サンプルなので、余計な装飾などは行っていないが、DIVタグをCSSで装飾して見栄えを良くしたり、JavaScriptのイベントを追加してタイトルバーでドラッグできるようにするなど、いろいろなことはできるようだ。

今回作成したソースコードの参照はこちらから。

https://gist.github.com/torafugu/5559183

今回参考にさせていただいたブログ記事。

jQueryで「window.open」タイプのポップアップウィンドウ方法
http://black-flag.net/jquery/20100630-1210.html

ドラッグ可能なポップアップウインドウを作ろう - jQuery入門
http://ponk.jp/jquery/basic/ipop

OK