JavaScriptによるポップアップウィンドウの出し方

javascript

prototype.js を使ったポップアップウィンドウの出し方。デモはこちら。

<html>
  <head>
    <script src="./prototype.js" type="text/javascript"></script>
    <script type="text/javascript">
      <!--
      function show_popup() {
        var evt_hndlr = function(event) {
            Element.show('popup');
            var posx = Event.pointerX(event);
            var posy = Event.pointerY(event);
            Element.setStyle('popup', {top:posy+"px", left:posx+"px"});
        }
        Event.observe('pos', 'click', evt_hndlr, false);
      };
      -->
    </script>
  </head>

  <body onload="show_popup();">
    <div id="popup" style="display:none; position: absolute; top: 0px; left: 0px; width: 200px; height: 150px; background: #ffffff; border: 3px solid gray;">
      <div style="height: 20px; background: darkblue;">
        <a href="#" onclick="Element.hide('popup');return false;" style="position: absolute; right: 0px; top: 0px; color: #eeeeee;">[x]</a>
      </div>
      <div style="padding: 10px;">
        ポップアップウィンドウ
      </div>
    </div>
    <div id="pos" style="border:1px solid gray; padding: 5px; height: 500px; background: #e0e0e0;">
      ここをクリックしてください。
    </div>
  </body>
</html>


ポイントは body の onload で、マウスクリックのイベントを エレメント pos に追加してるのと、クリック時にポップアップを表示して位置を変更しているところ。クリックされたポイントを prototype.js の Event クラスを使って割り出し、Element.setStyle で位置を変更している。