編集履歴

回答編集履歴

追記

2016/12/26 09:29

投稿

スコア14731

test CHANGED Viewed

@@ -151,3 +151,293 @@
 </html>
 ```
+追記
+---
+```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;
+            /* この３行は必須 */
+            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>
+```