ドラッグ可能なポップアップウインドウを作ろう - jQuery入門

ipop.js

第8回はjQueryでポップアップウインドウを作ってみましょう。ポップアップウインドウを実現するプラグインは、jQuery UIのダイアログや、jqModalなど優秀なものが沢山あるので、それらに劣るものを車輪の再発明する必要はないのですが、シンプルで改造し易いものが欲しくなる・・・かも知れませんので作ってみます。

もし使ってみたい人がいましたら配布・改造ご自由にどうぞ。連絡も必要ありません、が連絡頂けたら嬉しいです。名前は適当に「ipop.js」としました。

ダウンロード

右クリックしてダウンロードしてください。
ipop.js
サンプルHTML

サンプルの実行

別ページで開く

ipop.jsのソース


// ipop.js ポップアップウインドウ

//

// 使い方：

// <div id="ipop">

//   <div id="ipop_title">タイトル</div>

//   <div id="ipop_close">閉じるボタン</div>

//   中身

// </div>

//

// 上記のようなHTMLを作り、$.ipop() で呼び出す。



(function($) {

  $.ipop = function() {

    var wx, wy;    // ウインドウの左上座標



    // ウインドウの座標を画面中央にする。

    wx = $(document).scrollLeft() + ($(window).width() - $('#ipop').outerWidth()) / 2;

    if (wx < 0) wx = 0;

    wy = $(document).scrollTop() + ($(window).height() - $('#ipop').outerHeight()) / 2;

    if (wy < 0) wy = 0;



    // ポップアップウインドウを表示する。

    $('#ipop').css({top: wy, left: wx}).fadeIn(100);



    // 閉じるボタンを押したとき

    $('#ipop_close').click(function() {$('#ipop').fadeOut(100);});



    // タイトルバーをドラッグしたとき

    $('#ipop_title').mousedown(function(e) {

      var mx = e.pageX;

      var my = e.pageY;

      $(document).on('mousemove.ipop', function(e) {

        wx += e.pageX - mx;

        wy += e.pageY - my;

        $('#ipop').css({top: wy, left: wx});

        mx = e.pageX;

        my = e.pageY;

        return false;

      }).one('mouseup', function(e) {

        $(document).off('mousemove.ipop');

      });

      return false;

    });

  }

})(jQuery);

使い方

ipop.jsの先頭のコメント及びipop_test.htmlを見ると、だいたいは分かると思います。


<div id="ipop">

  <div id="ipop_title">タイトル</div>

  <div id="ipop_close">閉じるボタン</div>

  中身

</div>

このような形式でポップアップする部分を作って、$.ipop()で呼び出すだけです。


#ipop {

  width: 300px;

  height: 200px;

  position: absolute;

  display: none;

  z-index: 9999;

}

CSSとしてこの5行は必須です。その他は適用でかまいません。widthとheightプロパティでウインドウの幅と高さを決めます。

プログラムの解説


(function($) {・・・})(jQuery);

まずプログラム全体を上記の部分で囲っています。「function($) {・・・}」は無名関数の定義で、最後の「(jQuery)」によりその無名関数を引数jQueryで実行します。仮引数が$なので、jQueryが$に代入されて関数の中身が実行されます。他のライブラリとの名前の衝突を避けるために$が使えなくしていることがあるので、その場合でも関数の中で$を使えるようにする処置です。さらに、スコープを関数内に閉じ込める役割も果たしています。

ウインドウの座標を画面中央に表示する


wx = $(document).scrollLeft() + ($(window).width() - $('#ipop').outerWidth()) / 2;

if (wx < 0) wx = 0;

wy = $(document).scrollTop() + ($(window).height() - $('#ipop').outerHeight()) / 2;

if (wy < 0) wy = 0;

ポップアップウインドウを画面中央に表示するために座標を計算している部分です。$(window).width()で画面全体の幅、$('#ipop').outerWidth()で要素#ipopの（ボーダーも含めた）幅を取得できます。$(document).scrollLeft()は、ドキュメントの右へのスクロール量が取れます。それらを加味して横位置の中央座標を計算しています。縦位置も同じです。


$('#ipop').css({top: wy, left: wx}).fadeIn(100);

上で計算したウインドウの座標をCSSに設定して画面中央に表示しています。

タイトルバーをドラッグしたときの処理


$('#ipop_title').mousedown(function(e) {

  var mx = e.pageX;

  var my = e.pageY;

pageX,pageYにはマウスボタンが押下されたときのタイトルバーの座標が入ります。


$(document).on('mousemove.ipop', function(e) {

  wx += e.pageX - mx;

  wy += e.pageY - my;

  $('#ipop').css({top: wy, left: wx});

  mx = e.pageX;

  my = e.pageY;

  return false;

mousemoveイベント（マウスが動くときのイベント）に対して無名関数を割り当てている部分ですが、後からイベントを削除するために名前空間「ipop」を付加しています。onメソッドでイベントを追加します。jQuery 1.7以前の場合は、onメソッドの変わりにbindメソッドを使用してください。ウインドウの位置(wx,wy)は現在のマウス位置からひとつ前のマウス位置を引くことによって割り出しています。


}).one('mouseup', function(e) {

  $(document).off('mousemove.ipop');

});

mouseupイベント（マウスボタンが離されたとき）に上で登録したmousemoveイベントを削除している部分です。これでウインドウが動かなくなります。oneメソッドは一度だけイベントを実行します。offメソッドはイベントを削除します。jQuery 1.7以前の場合は、offメソッドの変わりにunbindメソッドを使用してください。

注意事項

IEの場合、select要素がz-indexの値を無視してウインドウの前面に出てしまう、というバグがあります。その場合はウインドウを表示する直前に


$('select').hide();

などで要素を消し、ウインドウを消した直後に


$('select').show();

で要素を復活させると良いでしょう。

前ページ　 jQuery入門 TOP　次ページ

ポンクソフト