정수빈 정수빈 2024-09-02
24/09/02 주소록 대량등록 팝업
@de796e5fea730da87cfb47d0b23d5c3f41bcb265
src/main/webapp/publish/adrbook1.html
--- src/main/webapp/publish/adrbook1.html
+++ src/main/webapp/publish/adrbook1.html
@@ -86,7 +86,7 @@
                         <p><img src="/publish/images/content/file_add.png" alt="파일 붙여넣기">엑셀 파일을 여기에 끌어다 놓으세요</p>
                     </div>
                     <div class="list_info">
-                        <p>총 <span class="c_e40000">171</span>건 / 중복 <span class="c_002c9a">9</span>건 / 오류 <span class="c_002c9a">9</span>건 <button type="button" class="btn_list_detail"><img src="/publish/images/search.png"></button></p>
+                        <p>총 <span class="c_e40000">171</span>건 / 중복 <span class="c_002c9a">9</span>건 / 오류 <span class="c_002c9a">9</span>건 <button type="button" class="btn_list_detail" data-tooltip="adr_popup14"><img src="/publish/images/search.png"></button></p>
                         <div>
                             <label for="" class="label">카테고리 선택</label>
                             <label for="" class="label">줄보기 선택</label>
@@ -688,6 +688,100 @@
 		</div>
 	</div><!--// 주소록 대량등록 팝업 -->
 
+
+
+<!-- 주소록 상세 결과 팝업 data-tooltip:adr_popup14 -->
+	<div class="tooltip-wrap">
+		<div class="popup-com adr_layer adr_popup14" tabindex="0" data-tooltip-con="adr_popup14" data-focus="adr_popup14" data-focus-prev="adr_popu14-close" style="width: 450px;">
+			<div class="popup_heading">
+				<p>주소록 상세 결과</p>
+				<button type="button" class="tooltip-close" data-focus="adr_popup14-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
+			</div>
+			<div class="layer_in" style="padding:30px 20px;">
+                <div class="table_top">
+                    <p>총 <span class="c_e40000">171</span>건 / 중복 <span class="c_002c9a">9</span>건 / 오류 <span class="c_002c9a">9</span>건</p><button type="button" class="excel_btn btnType"><i class="downroad"></i>엑셀 다운로드</button>
+                </div>
+                <div class="tb_wrap adr_list">
+                    <table class="tType4">
+                        <colgroup>
+                            <col style="width:32%;">
+                            <col style="width:auto;">
+                            <col style="width:90px;">
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th>이름</th>
+                                <th>휴대폰</th>
+                                <th>미등록 결과</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_222">오류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_002c9a">보류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_222">오류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_002c9a">보류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_222">오류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_002c9a">보류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_222">오류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_002c9a">보류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_222">오류</p></td>
+                            </tr>
+                            <tr>
+                                <td>오재일</td>
+                                <td>010-4407-7031*</td>
+                                <td><p class="fwMd c_002c9a">보류</p></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <ul class="cf_text_ul">
+                    <li>*중복번호는 하나의 번호만 등록됩니다.</li>
+                    <li>*휴대폰 형식에 맞지 않는 데이터는 삭제 후 업로드 됩니다.</li>
+                    <li>ex) 발송불가 특수문자, 자릿수 오류 등</li>
+                </ul>
+                <div class="popup_btn_wrap2">
+                    <button type="button">저장</button>
+                    <button type="button" class="tooltip-close" data-focus="adr_popup14-close" data-focus-next="adr_popup14">닫기</button>                      
+                </div>
+			</div>
+		</div>
+	</div>
+    <!-- //주소록 상세 결과 팝업 data-tooltip:adr_popup14 -->
     <!-- 그룹 합치기 팝업 data-tooltip:adr_popup02 -->
 	<div class="tooltip-wrap">
 		<div class="popup-com adr_layer adr_popup02" tabindex="0" data-tooltip-con="adr_popup02" data-focus="adr_popup02" data-focus-prev="adr_popup02-close" style="width: 510px;">
src/main/webapp/publish/css/popupLayer.css
--- src/main/webapp/publish/css/popupLayer.css
+++ src/main/webapp/publish/css/popupLayer.css
@@ -1203,6 +1203,14 @@
 
 .adr_layer.adr_popup01 .btn_list_detail {width:23px;height:23px;margin:-3px 0 0 5px;border:1px solid #d5d5d5;border-radius:5px;}
 .adr_layer.adr_popup01 .btn_list_detail img{width:69%;height:auto;margin:-3.5px 0 0 0;}
+.adr_layer.adr_popup14 .table_top{display:flex;align-items:center;justify-content:space-between;}
+.adr_layer.adr_popup14 .table_top .excel_btn{height:30px;padding:0 10px;}
+.adr_layer.adr_popup14 .tb_wrap.adr_list{min-height:320px;max-height:320px;overflow:auto;border-bottom:1px solid #d5d5d5;}
+.adr_layer.adr_popup14 .tb_wrap.adr_list::after{display:none;}
+.adr_layer.adr_popup14 .tb_wrap.adr_list td{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
+.adr_layer.adr_popup14 .cf_text_ul li{font-size:14px;color:#666;margin:0 0 5px 0;}
+.adr_layer.adr_popup14 .cf_text_ul li:last-child{margin:0;}
+
 
 
 /* ie */
src/main/webapp/publish/js/popupLayer.js
--- src/main/webapp/publish/js/popupLayer.js
+++ src/main/webapp/publish/js/popupLayer.js
@@ -151,6 +151,10 @@
 			if($(".popup-com:visible").length <= 1){
 				$(".mask").removeClass("on");
 			}else{}
+			
+			if($(this).closest(".adr_layer").is(".adr_popup14") == true){
+				$(".mask").addClass("on");
+			}else{}
 		})
 }
 
Add a comment
List