質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.02%

複数のポップアップウィンドウの表示方法

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,658

Yucchi

score 27

前提・実現したいこと

現在ipop.jsを使い特定の単語をそれぞれクリックするとドラッグ出来るポップアップウィンドウが同時に複数開くようにしています。今回は、2点ほど修正したいのですがやり方がわかりません。

1.クリックした順番にウィンドウが重なるようにしたい。
2.ウィンドウが開いた後、それぞれのウィンドウをクリックすると一番前に出るように設定したい。

今回掲載のコード以外でできる方法があればそれでも構いません。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>jquery ipop_multi.jsのサンプル</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript" src="js/ipop.js"></script>
<script type="text/javascript">
$(function() {
    $('#open1').click(function() {$("#mado1").ipop();} );
    $('#open2').click(function() {$("#mado2").ipop();} );
});
</script>

<style type="text/css">
.ipop {
    padding: 0;
    background-color: #fed;
    width: 300px;
    height: 200px;
    border: 1px solid #aaa;

    /* この3行は必須 */
    position: absolute;
    display: none;
    z-index: 9999;
}

.ipop_title {
    background-color: #fdc;
    cursor: move;
}

.ipop_close {
    cursor: pointer;
    float: right;
}
.image {
  width: 100%;
  text-align:center;
}

</style>
<title>ポップアップウインドウテスト</title>
</head>
<body>
<p>Lorem Ipsum is <a href="#" id="open1">simply</a> dummy text of the printing and <a href="#" id="open2">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#" id="open3">electronic</a> typesetting, remaining essentially unchanged. <p>

<div class="ipop" id="mado1">
    <div class="ipop_close">×</div>
    <div class="ipop_title">タイトル</div>
    <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
</div>
<div class="ipop" id="mado2">
    <div class="ipop_close">×</div>
    <div class="ipop_title">タイトル2</div>
    <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
  <div class="image"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
</div>
</body>
</html>

(function($) {
    $.fn.ipop = function() {

        var $this = $(this);

        var wx, wy;        // ウインドウの左上座標
        var mx, my;        // マウスの座標

        // ウインドウの座標を画面中央にする。
        wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2;
        if (wx < 0) wx = 0;
        wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2;
        if (wy < 0) wy = 0;

        // ポップアップウインドウを表示する。
        $this.css('top', wy).css('left', wx).fadeIn(100);

        // 閉じるボタンを押したとき
        $this.find('.ipop_close').click(function(){ $this.fadeOut(100);});

        // タイトルバーをドラッグしたとき
        $this.find('.ipop_title').mousedown(function(e) {
            mx = e.pageX;
            my = e.pageY;
            $(document).mousemove(mouseMove).mouseup(mouseUp);
            return false;
        });
        function mouseMove(e) {
            wx += e.pageX - mx;
            wy += e.pageY - my;
            $this.css('top', wy).css('left', wx);
            mx = e.pageX;
            my = e.pageY;
            return false;
        }
        function mouseUp() {
            $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
        }
    }
})(jQuery);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+4

ipop.jsを探していたら、複数ダイアログに対応したライブラリを見つけたので、これを使うと目的が達成できるのではないでしょうか。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <title>jquery ipop_multi.jsのサンプル</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#open1').click(function () {
                $("#mado1").ipop();
            });
            $('#open2').click(function () {
                $("#mado2").ipop();
            });
        });
    </script>

    <style type="text/css">
        .ipop {
            padding: 0;
            background-color: #fed;
            width: 300px;
            height: 200px;
            border: 1px solid #aaa;

            /* この3行は必須 */
            position: absolute;
            display: none;
            z-index: 9999;
        }

        .ipop_title {
            background-color: #fdc;
            cursor: move;
        }

        .ipop_close {
            cursor: pointer;
            float: right;
        }

        .image {
            width: 100%;
            text-align: center;
        }

    </style>
    <title>ポップアップウインドウテスト</title>
</head>
<body>
<p>Lorem Ipsum is <a href="#" id="open1">simply</a> dummy text of the printing and <a href="#"
                                                                                      id="open2">typesetting</a>
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
    the leap into <a href="#" id="open3">electronic</a> typesetting, remaining essentially unchanged.
<p>

    <div class="ipop" id="mado1">
        <div class="ipop_close">×</div>
        <div class="ipop_title">タイトル</div>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
</div>
<div class="ipop" id="mado2">
    <div class="ipop_close">×</div>
    <div class="ipop_title">タイトル2</div>
    <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
    <div class="image"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
</div>
<script src="http://kawama.jp/sample/js/ipop_multi.js"></script>
</body>
</html>

追記

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <title>jquery ipop_multi.jsのサンプル</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#open1').click(function () {
                $("body #open").append(
                    "<div class='ipop' id='mado1'>" +
                    "<div class='ipop_close'>×</div>" +
                    "<div class='ipop_title'>タイトル</div>" +
                    "<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>" +
                    "<div class='image'><img src='http://placehold.jp/24/cc9999/993333/150x100.png'></div>" +
                    "</div>"
                );
                $("#mado1").ipop();
            });
            $('#open2').click(function () {
                $("body #open").append(
                    "<div class='ipop' id='mado2'>" +
                    "<div class='ipop_close'>×</div>" +
                    "<div class='ipop_title'>タイトル2</div>" +
                    "<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>" +
                    "<div class='image'><img src='http://placehold.jp/24/cc9999/993333/150x100.png'></div>" +
                    "</div>"
                );
                $("#mado2").ipop();
            });
        });
    </script>

    <style type="text/css">
        .ipop {
            padding: 0;
            background-color: #fed;
            width: 300px;
            height: 200px;
            border: 1px solid #aaa;
            /* この3行は必須 */
            position: absolute;
            display: none;
            z-index: 9999;
        }

        .ipop_title {
            background-color: #fdc;
            cursor: move;
        }

        .ipop_close {
            cursor: pointer;
            float: right;
        }

        .image {
            width: 100%;
            text-align: center;
        }

    </style>
    <title>ポップアップウインドウテスト</title>
</head>
<body>
<p>Lorem Ipsum is <a href="#" id="open1">simply</a> dummy text of the printing and <a href="#"
                                                                                      id="open2">typesetting</a>
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
    the leap into <a href="#" id="open3">electronic</a> typesetting, remaining essentially unchanged.
</p>

<div id="open">

</div>
<script>

    (function ($) {
        var ySize = 0, xSize = 0;
        $.fn.ipop = function () {

            var $this = $(this);

            var wx, wy;        // ウインドウの左上座標
            var mx, my;        // マウスの座標

            // ウインドウの座標を画面中央にする。
            wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2 + xSize;
            if (wx < 0) wx = 0;
            if ($(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) <= wx) {
                xSize = 0;
                ySize = ySize + 50;
                wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2 + xSize;
            }
            wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2 + ySize;
            if (wy < 0) wy = 0;
            if ($(document).scrollTop() + ($(window).height() - $(this).outerHeight()) <= wy) {
                ySize = 0;
                ySize = ySize + 50;
                wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2 + ySize;
            }
            ySize = ySize + 50;
            xSize = xSize + 50;

            // ポップアップウインドウを表示する。
            $this.css('top', wy).css('left', wx).fadeIn(100);

            // 閉じるボタンを押したとき
            $this.find('.ipop_close').click(function () {
                $this.fadeOut(100);
            });

            // タイトルバーをドラッグしたとき
            $this.find('.ipop_title').mousedown(function (e) {
                mx = e.pageX;
                my = e.pageY;
                $(document).mousemove(mouseMove).mouseup(mouseUp);
                return false;
            });
            function mouseMove(e) {
                wx += e.pageX - mx;
                wy += e.pageY - my;
                $this.css('top', wy).css('left', wx);
                mx = e.pageX;
                my = e.pageY;
                return false;
            }

            function mouseUp() {
                $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
            }
        }
    })
    (jQuery);

</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/26 17:20

    ご回答ありがとうございます。
    こちらの掲載していただいたコードが現状なので、ここからそれぞれのウィンドウをクリックした順番で上に重ねて表示することと、開いたそれそれのウィンドウをクリックすると一番手前に表示されるようになることが質問です。
    わかりにくい質問の仕方で申し訳ありません。

    キャンセル

  • 2016/12/26 18:27

    的外れな回答をしてしまい失礼しました。追記しました。

    キャンセル

  • 2016/12/27 13:10

    ありがとうございます。ご丁寧に教えていただいたのに、これでも思ったような動きにはならず違うjQueryで対応しました。また何かあったらよろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる