[Ajax] 레이어 팝업

현재 페이지에서 팝업의 기능이 있을 경우 새창으로 띄우는 형태의 모달창으로 하지않고

레이어 형태의 팝업으로 새로고침이 되지않는게 특징이다.

아래의 화면처럼 리스트의 상세보기 버튼이 있다고 가정하고 

구현된 소스를 보면 이해가 쉬울것같다.

참고로 소스는 스프링 기반 타임리프라는 라이브러리의 소스이다.

타임리프thymeleaf란?

자바 라이브러리이며, 웹과 웹이 아닌 환경 양쪽에서 텍스트, HTML, XML, Javascript, CSS 그리고 텍스트를 생성할 수 있는 템플릿 엔진이다. 웹 애플리케이션에서 뷰View 계층 에 보다 적합하지만, 오프라인 환경에서 많은 형태로 처리가 가능하다.

스프링 MVC와의 통합 모듈을 제공하며, 애플리케이션에서 JSP로 만든 기능들을 완전히 대체할 수 있다.

타임리프의 목표는 세련되고 잘다듬어진 템플릿을 제공하는 것이다. Standard와 SpringStandard를 통해서 강력하고 자연스러운 테플릿을 만들어낼 수 있어 정적 프로토타입도 브라우저에서 정확하게 동작한다. 거기서 더 나아가 다이얼렉트dialect를 개발하여 타임리프를 확장할 수 있다. 

<!-- board_top --> <div class="board_top">  <div class="lside">   <h3>배포오류현황</h3>  </div> </div> <!-- //board_top --> <!-- board_list --> <div class="board_list01">  <table summary="">  <caption>배포오류현황 : 목록</caption>  <colgroup>   <col width="110" />   <col width="*" />   <col width="142" />   <col width="142" />   <col width="142" />   <col width="142" />   <col width="142" />  </colgroup>  <thead>  <tr>   <th scope="col" class="first"><em>오류횟수</em></th>   <th scope="col"><em>오류구분</em></th>   <th scope="col"><em>배포시도일</em></th>   <th scope="col"><em>배포담당자</em></th>   <th scope="col"><em>긴급여부</em></th>   <th scope="col"><em>첨부파일</em></th>   <th scope="col"><em>상세정보</em></th>  </tr>  </thead>  <tbody>  <tr th:each="dItem: ${distList}">   <td class="first">    <div th:text="${dItem.distSeqNo != null} ? ${dItem.distSeqNo} : ''" class="article"></div>   </td>   <td>    <div th:text="${dItem.distResultCode != null} ? ${T(com.skt.msdp.common.CommonCodeHelper).getName('MODTYPE', dItem.distResultCode)} : ''" class="article"></div>   </td>   <td>    <div th:text="${dItem.distTryDate != null} ? ${#dates.format(dItem.distTryDate, 'yyyy-MM-dd')} : ''"  class="article">2013-00-00</div>   </td>   <td>    <div class="article">     <!-- tooltipbox -->     <span class="tooltipbox">      <em th:text="${dItem.distEmpName != null} ? ${dItem.distEmpName} : ''" empno="" th:attr="empno=${dItem.distEmpNo}"></em>     </span>     <!-- //tooltipbox -->     </div>   </td>   <td>    <div th:text="${dItem.urgencyYn != '' and dItem.urgencyYn == 'Y'} ? 'Yes' : 'No'" class="article">No</div>   </td>   <td>    <div th:switch="${dItem.map.get('fileRelId') != null} ? ${true} : ${false}" class="article" >        <span th:case="${true}">        <a th:href="'/fileRel/download?fileRelId='+${dItem.map.get('fileRelId')}" class="btn_white30"><span>다운로드</span></a></span>     <span th:case="${false}"></span>    </div>   </td>   <td>    <div th:switch="${dItem.modDetailDesc != null} ? ${true} : ${false}" class="article">     <span th:case="${true}"><a th:href="'javascript:fnPopupView('+${dItem.distSeq}+');'" class="popup_view1 btn_white30"><span>상세보기</span></a></span>     <span th:case="${false}"></span>     </div>   </td>  </tr>  </tbody>  </table>  <!-- layerpopup : 배포수정 상세보기 -->  <div class="layer_popup01 layerbox" style="width:630px; display:none;">   <!-- wrap -->   <div class="wrap">    <div class="header">     <h1><span>배포수정 상세보기</span></h1>    </div>    <div class="contents">     <h2>상세내용</h2>     <div class="databox scroll-pane">      <div id="modDesc" class="inner"></div>     </div>    </div>    <p class="close"><a href="#" class="modal_close"><img src="../images/common/btn/btn_close.png" alt="닫기" /></a></p>   </div>   <!-- wrap -->  </div>  <!-- //layerpopup : 배포수정 상세보기 -->  <script type="text/javascript"> <!--  function fnPopupView(id) {     $.ajax({     type:"get",     dataType: "json",   cache: false,   url: "/distribute/get_desc_ajax.json",   data: {'distSeq':id},   success: function(data){      if(data != null) {     $("#modDesc").html(data.distInfo.modDetailDesc);     }        $(".layer_popup01").modal({     overlayId: 'layer_popup01',     containerId: 'layerImageBox01',     opacity:50,     overlayCss:{     backgroundColor:'#000',     cursor:''     },     overlayClose:false,     onShow: function(dialog) {               $(dialog.container).draggable({       handle:'div .header'                           });           }     });    $(".layer_popup01 .scroll-pane").jScrollPane(    {     verticalDragMinHeight: 110,     verticalDragMaxHeight: 110    });       },   error: function(xhr,status,err){        debug(err);   }     });  } // --> </script>  </div> <!-- //board_list -->

======================================개발 새발 개발왕===================================