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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

<?php include_once("./_common2.php"); ?>

<?php 
    if(isset($_GET["page"])){
        $page = $_GET["page"];
    }else{
        $page = 1;
    }
?>

<style>

/*24.04.04 popup (jquery-ui)*/
[aria-describedby='modal_member_box3'].ui-dialog .ui-dialog-buttonpane {display:none !important;}
 [aria-describedby='modal_member_box3'] .ui-widget-header {border:none;background:none;padding: 0px;}
 [aria-describedby='modal_member_box3'].ui-dialog .ui-dialog-title {display:none;}
[aria-describedby='modal_member_box3'].ui-draggable .ui-dialog-titlebar {position: absolute;cursor: move;right: 0;z-index: 50;top: 10px;}
/* #modal_member_box2 {height:230px !important;} */


/* 팝업 공통 */
[aria-describedby='modal_member_box3'] {z-index: 99999;padding: 0px;border: 0px;border-radius: 0px;}
[aria-describedby='modal_member_box2'].ui-draggable .ui-dialog-titlebar{}

[aria-describedby='modal_member_box3'].ui-dialog{overflow: unset;}
[aria-describedby='modal_member_box3'].ui-draggable .ui-dialog-titlebar{right: 10px;top: -55px;}
[aria-describedby='modal_member_box3'] .ui-button{width: 32px !important;height: 32px !important;border: 0px !important;background: transparent !important;appearance: none;outline: none;}
[aria-describedby='modal_member_box3'] .ui-button-icon-primary{background: url('https://mjsoft.co/html/millennium/images/ui_icons/button_close.png') no-repeat !important;width: 32px;height: 32px;left: 0px;margin: 0px;}
[aria-describedby='modal_member_box3'] .ui-button-text{padding: 0px !important;}
[aria-describedby='modal_member_box3'] .ui-widget-overlay{background: #000000;opacity: .6;}


/* 팝업 공통 */

#modal_member_box3 {background: #E9F2FF;padding: 10px !important;}
.modal_wrap{height: 100%;overflow: scroll;}
.modal_win{box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);border-radius: 20px;margin-bottom: 20px;}

.modal_info{border-radius: 20px 20px 0px 0px;padding: 20px 20px 10px 20px;}
.modal_info_top h2{font-size: 16px;font-weight: 600;color: #fff;text-align: left;}
.modal_info_top .btn_close{display: none;}
.modal_info_bottom::after{content: '';display: block;clear: both;}
.modal_info_bottom li{float: left;}
.modal_info_bottom li span{font-size: 12px;color: #fff;padding-right: 8px;box-sizing: border-box;border-right: 1px solid #fff;}
.modal_info_bottom li:nth-child(2) span:first-child{padding-left: 8px;}
.modal_info_bottom li:nth-child(2) span:last-child{padding-right: 0px;border-right: 0px;}

.modal_win:nth-child(2n+1) .modal_info{background: #2FAECA;}
.modal_win:nth-child(2n) .modal_info{background: #2C67CD;} 

.modal_win:nth-child(2n+1) .modal_txt_btn{background: #2FAECA;}
.modal_win:nth-child(2n) .modal_txt_btn{background: #2C67CD;}
.modal_txt_btn{padding: 0px 10px;}
.modal_txt_btn::after{content: '';display: block;clear: both;}

.modal_txt_btn li{float: left;border-radius: 10px 10px 0px 0px;}
.modal_txt_btn li h3{font-size: 14px;font-weight: 600;color: #fff;line-height: 30px;padding: 0px 10px;}
.modal_txt_btn li.on{background: #fff;}
.modal_win:nth-child(2n+1) .modal_txt_btn li.on h3{color: #2FAECA;}
.modal_win:nth-child(2n) .modal_txt_btn li.on h3{color: #2C67CD;}

.modal_txt{border-radius: 0px 0px 20px 20px;background: #fff;}
.modal_txt .txt_box{display: none;}
.modal_txt .txt_box.on{display: block;}

.txt_box{padding: 20px;}
.txt_box p{font-size: 14px;line-height: 20px;color: #343434;word-break: break-all;}
.before_txt em{color:#ea1300; word-break:break-all;}
.after_txt em{color:#2525e2; word-break:break-all;}

/*24.02.13 남상복 수정*/
#paging_menu{text-align: center;margin-top: 30px;margin-bottom: 10px;}
#paging_menu .pagination{display: inline-block;}
#paging_menu .pagination::after{content: '';display: block;clear: both;}
#paging_menu li{float: left;padding: 0px 5px;}
.active .page-link{font-weight: bold;color: #333333;}
#paging_menu .page-link{color: #9E9E9E;font-size: 14px;}
.page-item.first, .page-item.last{position: relative;}
.page-item.first::before{content: '';position: absolute;right: 100%;top: 50%;transform: translateY(-50%);width: 8px;height: 8px;background: url('./images/paging/icon_firstlast.png')  no-repeat 0px 0px;}
.page-item.last::after{content: '';position: absolute;left: 100%;top: 50%;transform: translateY(-50%);width: 8px;height: 8px;background: url('./images/paging/icon_firstlast.png')  no-repeat -8px 0px;}
</style>

<div class="modal_wrap">
    <div>
    <?php include('./review_modals_inc_2.php'); ?>
    </div>
    <div id="paging_menu" ></div>
</div><!--//modal_wrap-->


<script>



$(function(){
    //페이징 메뉴 추가 24.02.13 남상복 수정
    var $list = $('.modal_win'),
        $list_length = $list.length,
        $page_num = 10;//1페이지 당 들어갈 후기 개수
    
    $list.hide();
    for(var i = 0; i < 10; i++){ //
        $list.eq(i).show();
    }
    $list.eq(0).attr('autofocus','autofocus');

    $('.modal_wrap').scrollTop(0);
    
    $('#paging_menu').twbsPagination({ //페이징 메뉴
        totalPages: Math.ceil($list_length / $page_num),    // 총 페이지 번호 수
        visiblePages: 5,    // 하단에서 한번에 보여지는 페이지 번호 수
        startPage : 1, // 시작시 표시되는 현재 페이지
        initiateStartPageClick: true,    // 플러그인이 시작시 페이지 버튼 클릭 여부 (default : true)
        first : "처음",    // 페이지네이션 버튼중 처음으로 돌아가는 버튼에 쓰여 있는 텍스트
        prev : "이전",    // 이전 페이지 버튼에 쓰여있는 텍스트
        next : "다음",    // 다음 페이지 버튼에 쓰여있는 텍스트
        last : "맨끝",    // 페이지네이션 버튼중 마지막으로 가는 버튼에 쓰여있는 텍스트
        nextClass : "page-item next",    // 이전 페이지 CSS class
        prevClass : "page-item prev",    // 다음 페이지 CSS class
        lastClass : "page-item last",    // 마지막 페이지 CSS calss
        firstClass : "page-item first",    // 첫 페이지 CSS class
        pageClass : "page-item",    // 페이지 버튼의 CSS class
        activeClass : "active",    // 클릭된 페이지 버튼의 CSS class
        disabledClass : "disabled",    // 클릭 안된 페이지 버튼의 CSS class
        anchorClass : "page-link",    //버튼 안의 앵커에 대한 CSS class
        
        onPageClick: function (event, page) {
            //클릭 이벤트
            $list.hide();
            var $list_num = parseInt($('.active .page-link').text()); //문자열을 숫자열로 변환
            for(var i = ($list_num - 1)*10; i < $list_num*10; i++){ //
                $list.eq(i).show();

            }
            $('.modal_wrap').scrollTop(0);
        }
    });


    
    
    $('.modal_win').each(function(){ // 각각의 modal_win에 같은 함수를 실행
        //탭 버튼 클릭 시
        var $txtBtn = $(this).find('.modal_txt_btn li'),
            $txtBox = $(this).find('.modal_txt .txt_box'),
            $before = $(this).find('.modal_before'),
            $after = $(this).find('.modal_after');
        //eq()는 변경전 순서를 기준으로 작동함
        $txtBtn.eq(0).insertAfter($txtBtn.eq(1));

        $txtBtn.eq(1).addClass('on');
        $txtBox.eq(1).addClass('on');

        $before.insertAfter($after);

        $txtBtn.on('click', function(){
            var i = $(this).index();

            if($(this).hasClass('before_btn')){
                $txtBox.removeClass('on');
                $before.addClass('on');
            } else {
                $txtBox.removeClass('on');
                $after.addClass('on');
            }

            $txtBtn.removeClass('on');
            $(this).addClass('on');
        });
    });

    
});
</script>