ポンクソフト

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

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

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

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 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:


check_boxes
ソースを使ってもいいですか?
2017/07/12 16:01

k
jQueryで作成した付箋を複数人で同時に編集し共有するシステムを実装するとなると、どのような技術を用いるべきでしょうか?
2017/06/20 23:19

ataru
もぐらたたきに絵を入れるとしたら、どこを変えたらいいのですか?
2016/09/06 14:20

教えてください
クイズゲームの作り方で、2問目、3問目を作っても絶対に
2番が正解になりますよね?

input要素を読み込んでいるので、全て同じ動作になると思うんですが、他の番号を正解にしたい場合どうしたら良いでしょうか?

また、inputにid行ってみましたが、うまく反応しませんでした。
2016/03/07 14:13

まほ
わかりやすく説明していただきありがとうございます!
ところで、
$.each(items, function(i, item) {
make().css(item.css).html(item.html);
});
の部分だけ今ひとつ理解ができなかったのですが
localStorage.stickyに値が入っているときに
①itemsという配列に JSON形式の文字列をjsのオブジェクトとして返し
②それぞれのitemsの要素に対してcss、htmlの要素の中身を入れている

という認識で良いでしょうか?

function(i,item)のところにiが入っていますが、これはどこに影響を与えているのでしょうか?

長々とすみませんがご回答いただければ嬉しいです!
2016/02/17 21:03

ぴよよ
↓ 目次8からHTMLのheadの部分の記述が・・・スミマセン
2016/02/06 01:34

ぴよよ
これまでスムーズにできたのですが、今回わからないです><;
2016/02/06 01:31

UT
わかりやすいですね!感謝します。
2016/01/26 10:02

こっぺぱん
ありがとです
2016/01/19 15:32


ありがとうございます。
2016/01/19 15:32

残りを読む »