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

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

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

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

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="content-type" content="text/html; charset=utf-8">
5<meta http-equiv="content-style-type" content="text/css">
6<meta http-equiv="content-script-type" content="text/javascript">
7<title>jquery ipop_multi.jsのサンプル</title>
8<script type="text/javascript" src="http://www.google.com/jsapi"></script>
9<script type="text/javascript">google.load("jquery", "1.4");</script>
10<script type="text/javascript" src="js/ipop.js"></script>
11<script type="text/javascript">
12$(function() {
13	$('#open1').click(function() {$("#mado1").ipop();} );
14	$('#open2').click(function() {$("#mado2").ipop();} );
15});
16</script>
17
18<style type="text/css">
19.ipop {
20	padding: 0;
21	background-color: #fed;
22	width: 300px;
23	height: 200px;
24	border: 1px solid #aaa;
25
26	/* この３行は必須 */
27	position: absolute;
28	display: none;
29	z-index: 9999;
30}
31
32.ipop_title {
33	background-color: #fdc;
34	cursor: move;
35}
36
37.ipop_close {
38	cursor: pointer;
39	float: right;
40}
41.image {
42  width: 100%;
43  text-align:center;
44}
45
46</style>
47<title>ポップアップウインドウテスト</title>
48</head>
49<body>
50<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>
51
52<div class="ipop" id="mado1">
53	<div class="ipop_close">×</div>
54	<div class="ipop_title">タイトル</div>
55	<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
56</div>
57<div class="ipop" id="mado2">
58	<div class="ipop_close">×</div>
59	<div class="ipop_title">タイトル2</div>
60	<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
61  <div class="image"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
62</div>
63</body>
64</html>

javascript
1(function($) {
2	$.fn.ipop = function() {
3
4		var $this = $(this);
5
6		var wx, wy;		// ウインドウの左上座標
7		var mx, my;		// マウスの座標
8
9		// ウインドウの座標を画面中央にする。
10		wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2;
11		if (wx < 0) wx = 0;
12		wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2;
13		if (wy < 0) wy = 0;
14
15		// ポップアップウインドウを表示する。
16		$this.css('top', wy).css('left', wx).fadeIn(100);
17
18		// 閉じるボタンを押したとき
19		$this.find('.ipop_close').click(function(){ $this.fadeOut(100);});
20
21		// タイトルバーをドラッグしたとき
22		$this.find('.ipop_title').mousedown(function(e) {
23			mx = e.pageX;
24			my = e.pageY;
25			$(document).mousemove(mouseMove).mouseup(mouseUp);
26			return false;
27		});
28		function mouseMove(e) {
29			wx += e.pageX - mx;
30			wy += e.pageY - my;
31			$this.css('top', wy).css('left', wx);
32			mx = e.pageX;
33			my = e.pageY;
34			return false;
35		}
36		function mouseUp() {
37			$(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
38		}
39	}
40})(jQuery);
41

行動規範の内容に同意します

回答1件

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

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="content-type" content="text/html; charset=utf-8">
5    <meta http-equiv="content-style-type" content="text/css">
6    <meta http-equiv="content-script-type" content="text/javascript">
7    <title>jquery ipop_multi.jsのサンプル</title>
8    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
9    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
10    <script type="text/javascript">
11        $(function () {
12            $('#open1').click(function () {
13                $("#mado1").ipop();
14            });
15            $('#open2').click(function () {
16                $("#mado2").ipop();
17            });
18        });
19    </script>
20
21    <style type="text/css">
22        .ipop {
23            padding: 0;
24            background-color: #fed;
25            width: 300px;
26            height: 200px;
27            border: 1px solid #aaa;
28
29            /* この３行は必須 */
30            position: absolute;
31            display: none;
32            z-index: 9999;
33        }
34
35        .ipop_title {
36            background-color: #fdc;
37            cursor: move;
38        }
39
40        .ipop_close {
41            cursor: pointer;
42            float: right;
43        }
44
45        .image {
46            width: 100%;
47            text-align: center;
48        }
49
50    </style>
51    <title>ポップアップウインドウテスト</title>
52</head>
53<body>
54<p>Lorem Ipsum is <a href="#" id="open1">simply</a> dummy text of the printing and <a href="#"
55                                                                                      id="open2">typesetting</a>
56    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
57    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
58    the leap into <a href="#" id="open3">electronic</a> typesetting, remaining essentially unchanged.
59<p>
60
61    <div class="ipop" id="mado1">
62        <div class="ipop_close">×</div>
63        <div class="ipop_title">タイトル</div>
64<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
65</div>
66<div class="ipop" id="mado2">
67    <div class="ipop_close">×</div>
68    <div class="ipop_title">タイトル2</div>
69    <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>
70    <div class="image"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
71</div>
72<script src="http://kawama.jp/sample/js/ipop_multi.js"></script>
73</body>
74</html>

追記

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="content-type" content="text/html; charset=utf-8">
5    <meta http-equiv="content-style-type" content="text/css">
6    <meta http-equiv="content-script-type" content="text/javascript">
7    <title>jquery ipop_multi.jsのサンプル</title>
8    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
9    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
10    <script type="text/javascript">
11        $(function () {
12            $('#open1').click(function () {
13                $("body #open").append(
14                    "<div class='ipop' id='mado1'>" +
15                    "<div class='ipop_close'>×</div>" +
16                    "<div class='ipop_title'>タイトル</div>" +
17                    "<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>" +
18                    "<div class='image'><img src='http://placehold.jp/24/cc9999/993333/150x100.png'></div>" +
19                    "</div>"
20                );
21                $("#mado1").ipop();
22            });
23            $('#open2').click(function () {
24                $("body #open").append(
25                    "<div class='ipop' id='mado2'>" +
26                    "<div class='ipop_close'>×</div>" +
27                    "<div class='ipop_title'>タイトル2</div>" +
28                    "<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</p>" +
29                    "<div class='image'><img src='http://placehold.jp/24/cc9999/993333/150x100.png'></div>" +
30                    "</div>"
31                );
32                $("#mado2").ipop();
33            });
34        });
35    </script>
36
37    <style type="text/css">
38        .ipop {
39            padding: 0;
40            background-color: #fed;
41            width: 300px;
42            height: 200px;
43            border: 1px solid #aaa;
44            /* この３行は必須 */
45            position: absolute;
46            display: none;
47            z-index: 9999;
48        }
49
50        .ipop_title {
51            background-color: #fdc;
52            cursor: move;
53        }
54
55        .ipop_close {
56            cursor: pointer;
57            float: right;
58        }
59
60        .image {
61            width: 100%;
62            text-align: center;
63        }
64
65    </style>
66    <title>ポップアップウインドウテスト</title>
67</head>
68<body>
69<p>Lorem Ipsum is <a href="#" id="open1">simply</a> dummy text of the printing and <a href="#"
70                                                                                      id="open2">typesetting</a>
71    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
72    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
73    the leap into <a href="#" id="open3">electronic</a> typesetting, remaining essentially unchanged.
74</p>
75
76<div id="open">
77
78</div>
79<script>
80
81    (function ($) {
82        var ySize = 0, xSize = 0;
83        $.fn.ipop = function () {
84
85            var $this = $(this);
86
87            var wx, wy;		// ウインドウの左上座標
88            var mx, my;		// マウスの座標
89
90            // ウインドウの座標を画面中央にする。
91            wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2 + xSize;
92            if (wx < 0) wx = 0;
93            if ($(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) <= wx) {
94                xSize = 0;
95                ySize = ySize + 50;
96                wx = $(document).scrollLeft() + ($(window).width() - $(this).outerWidth()) / 2 + xSize;
97            }
98            wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2 + ySize;
99            if (wy < 0) wy = 0;
100            if ($(document).scrollTop() + ($(window).height() - $(this).outerHeight()) <= wy) {
101                ySize = 0;
102                ySize = ySize + 50;
103                wy = $(document).scrollTop() + ($(window).height() - $(this).outerHeight()) / 2 + ySize;
104            }
105            ySize = ySize + 50;
106            xSize = xSize + 50;
107
108            // ポップアップウインドウを表示する。
109            $this.css('top', wy).css('left', wx).fadeIn(100);
110
111            // 閉じるボタンを押したとき
112            $this.find('.ipop_close').click(function () {
113                $this.fadeOut(100);
114            });
115
116            // タイトルバーをドラッグしたとき
117            $this.find('.ipop_title').mousedown(function (e) {
118                mx = e.pageX;
119                my = e.pageY;
120                $(document).mousemove(mouseMove).mouseup(mouseUp);
121                return false;
122            });
123            function mouseMove(e) {
124                wx += e.pageX - mx;
125                wy += e.pageY - my;
126                $this.css('top', wy).css('left', wx);
127                mx = e.pageX;
128                my = e.pageY;
129                return false;
130            }
131
132            function mouseUp() {
133                $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
134            }
135        }
136    })
137    (jQuery);
138
139</script>
140</body>
141</html>