Boxer-master/jquery.fs.boxer.js

boxer 라는 팝업 플러그인을 사용했다.


<script src="${pageContext.request.contextPath}/resources/js/Boxer-master/jquery.fs.boxer.js"></script>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/js/Boxer-master/jquery.fs.boxer.css" />


js와 css를 추가 시켜 준 뒤,

$J(document).ready(function(){
  $J(".boxer").boxer();
 
  $J('.boxer1').click(function(){
   $J('.boxer').attr('href', 'resources/test.jsp'); // << 이 부분은 다른 jsp 페이지를 삽입한 부분!
   $J('.boxer').trigger("click");
  });
 });
이렇게 ready를 준비해 주고,
body에


<a href="#" class="boxer1">Example</a>
<a href="#" class="boxer" data-boxer-height="500"></a>

이렇게 해 주면, .boxer 에 팝업이 뜬다. (mask 처리 된)
우왕-

WEB-INF 밑에는 따로 jsp 이름만으로 접근하기 어려워서 resource 폴더 밑에 두었고,
이 뒤로는 WEB-INF 밑에 넣어 사용함.
* 개발 환경은 Spring + ibatis + postgresql



어차피 화면 이동은 MVC 니까 다 똑같고,
나는 저기서 x 버튼이 아니라 팝업 속 jsp 페이지에서 버튼을 눌렀을 때 팝업이 꺼지게 하고 싶었음.
그래서,

$J(top.document).find(".boxer-close").trigger('click');


이렇게 접근했다.
알고보니 jsp 페이지를 넣는게 iframe 인 듯 해서 iframe 에서 부모 엘리먼트에 접근하는 방식을 사용하였음.