20. 9. 9.

Jquery Layer Popup(Drag & Drop)

은근히 쓰게되는 제이쿼리 레이어팝업...
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>레이어 팝업</title>
    <style>
        /* Layer 팝업 css */
        .LayerPopupTbl {position: absolute;border: 1px solid #2d2d2d;display: table;background-color: #ffffff;border-collapse: collapse;}
        .LayerPopupTbl > thead > tr > td {width: 100%;padding-top: 3px;padding-bottom: 3px;background-color: #00CCFF;text-align: right;}
        .LayerPopupTbl > tbody > tr > td {background-color: #FFF;display: table-cell;}
        .LayerPopupTbl > tbody > tr > td img {margin:-1px;float:left;}
        .LayerPopupTbl > tfoot > tr > td {background-color: #c9c9c9;padding: 3px;}
    </style>
    <script>
        /* Popup */
        var PopupmoveX = 0;
        var PopupmoveY = 0;
        var topPopup = 0;
        var leftPopup = 0;
        function zIndexReload(ele) {
            $(ele).css("z-index", 1000).siblings().css("z-index", 999);
        }
        function Popupdrag(ev) {
            if ($(ev.target).offset() != undefined) {
                topPopup = ev.clientY - $(ev.target).offset().top;
                leftPopup = ev.clientX - $(ev.target).offset().left;
            }
            PopupmoveX = ev.clientX;
            PopupmoveY = ev.clientY;
        }
        function Popupdrop(ev) {
            PopupmoveX = ev.clientX;
            PopupmoveY = ev.clientY;
            $(ev.target).css("top", (PopupmoveY - topPopup)).css("left", (PopupmoveX - leftPopup));
        }
        function setCookie(name, value, expiredays) {
            var todayDate = new Date();
            todayDate.setDate(todayDate.getDate() + expiredays);
            //todayDate.getDate()- localtime의 달의 날짜를 반환(1~31).  setDate의경우 달의 날짜를 설정
            document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';';
        }
        function getCookie(name) {
            var nameOfCookie = name + '=';
            var x = 0;
            while (x <= document.cookie.length) {
                var y = (x + nameOfCookie.length);
                if (document.cookie.substring(x, y) == nameOfCookie) {
                    if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
                        endOfCookie = document.cookie.length;
                    return unescape(document.cookie.substring(y, endOfCookie));
                }
                x = document.cookie.indexOf(' ', x) + 1;
                if (x == 0)
                    break;
            }
            return '';
        }
        // 오늘 하루 이창을 열지 않음
        function PopupClose(elem) {
            var elemName = $(elem).parents("table:first").attr("id");
            setCookie(elemName, 'done', 1);  // 오른쪽 숫자는 쿠키를 유지할 기간을 설정합니다
            $(elem).parents("table:first").remove();
        }
 
        $(function () {
            /* 목록만큼 돌린다 */
            for (var i in popupArray) {
                var mypopupName = popupArray[i].name;
                var mypopupTop = popupArray[i].top;
                var mypopupLeft = popupArray[i].left;
                var mypopuphtml = popupArray[i].html;
                /* 오늘 하루 이창 열지 않음을 누른상태가 아니라면 보여준다. */
                if (getCookie(mypopupName) != "done") {
                    var popuptbl = document.createElement("table");
                    popuptbl.setAttribute("class", "LayerPopupTbl");
                    popuptbl.setAttribute("id", mypopupName);
                    popuptbl.setAttribute("draggable", true);
                    popuptbl.setAttribute("ondragstart", "Popupdrag(event)");
                    popuptbl.setAttribute("ondragend", "Popupdrop(event)");
                    popuptbl.setAttribute("onmouseover", "zIndexReload(this)");
                    popuptbl.style.top = mypopupTop;
                    popuptbl.style.left = mypopupLeft;
                    var formhtml = [];
                    formhtml.push("<thead><tr><td><a onclick=\"$(this).parents('table:first').remove();\">[닫기]</a></td></tr></thead>");
                    formhtml.push("<tbody><tr><td>" + mypopuphtml + "</td></tr></tbody>");
                    formhtml.push("<tfoot><tr><td><label><input type=\"checkbox\" onClick=\"PopupClose(this);\" /> 오늘 하루 이창을 열지 않음</label></td></tr></tfoot>");
                    popuptbl.innerHTML = formhtml.join("");
                    document.body.appendChild(popuptbl);
                }
            }
        });
 
        /* 팝업목록 name=팝업이름(id), top:팝업위치, left: 팝업위치, html : 팝업내용 - 만질경우 이부분만 고쳐서 사용하려고 구성...  */
        var popupArray = [
            /* 팝업1 */
            { "name": "POPUP_ex_1", "top": "8px", "left": "20px", "html": "<a href='http://www.naver.com'><img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/banner_roulette.png'/></a>" },
            /* 팝업2 */
            { "name": "POPUP_ex_2", "top": "8px", "left": "300px", "html": "<div style=\"background-color:yellow\"><h4 style=\"margin:0;padding:0;line-height:1.6;\">공지사항</h4><p style=\"margin:0;padding:0;line-height:1.6;\">안녕하세요</p></div>" },
            /* 팝업3 */
            { "name": "POPUP_ex_3", "top": "176px", "left": "20px", "html": "<img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/bingo_banner.png'>" },
        ]
    </script>
</head>
<body>
</body>
</html>
작성자: 시간: 댓글 없음:
라벨: , , ,
피드 구독하기: 글 (Atom)