부트스트랩 modal 다른 페이지 내용 불러오기

 

아.. 모달 옵션 중 remote 가 부트스트랩 버전에 따라 사용이 불가능해지면서 jQuery.load 를 쓰라고 나와있어 검색을 엄청 해봤는데ㅠ

<a> 태그 href=url 은 스프링 프레임워크 url 로 호출해야 하고...

jsp화면 뿌리는건 또 Tiles로 이루어져 있어서...

엄청 헤매고 헤매다 시간만 하루가 멀다하고 허비하는 바람에 거의 포기 하고 있었는데...

 

이제서야 ㅠ 원하는대로 됐다...

 

어떻게 보면 엄청 간단한건데 기초가 부실하니 의미없는 타이핑과 새로고침만 하고 있었음..

 

참고 : http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url

 

 

핵심은...

모달을 부르는 원래페이지에서는 .modal-content 까지만 선언하고...

서브페이지에는 .modal-head, .modal-body, .modal-footer 만 있으면 된다는거.

 

 

모달 부르는 jsp

<a data-toggle="modal" href="testForm.do" data-target="#modal-testNew" role="button" data-backdrop="static">
 <span class="btn btn-xs btn-success">테스트 등록</span>
</a>
 
 
<div id="modal-testNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="테스트정보 등록" aria-describedby="테스트 모달">
    <div class="modal-dialog" style="width:1200px;height:700px">
        <div class="modal-content">
        </div>
    </div>
</div>

 

모달 본체 jsp

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</button>
    <h3 class="smaller lighter blue no-margin modal-title">검수정보 등록</h3>
</div>
 
<div class="modal-body">
    테스트입니다.                     
</div>
 
<div class="modal-footer">
    <span class="btn btn-sm btn-warning" id="testDel">
        전체삭제<i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
    </span>
    <span class="btn btn-sm btn-success" id="testSave">
        저장<i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
    </span>
    <button class="btn btn-sm btn-danger pull-right" data-dismiss="modal" id="btnClose">
        <i class="ace-icon fa fa-times"></i>닫기
    </button>
</div>

 

스프링 프레임워크 java

@RequestMapping(value="/testForm", method=RequestMethod.GET)
public String testForm(HttpServletRequest request, @RequestParam Map<String, Object> param, Model model) throws Exception {
    if (!adminMemberService.isPermit(AdminMember.WEB)) {
        return "/admin/permission.noTiles";
    } else {
        model.addAttribute("permission", adminMemberService.getPermission());
    }
    return "/admin/sale/testForm.noTiles";
}