[JAVA 개발] jquery blockUI를 사용한 모달창(레이어팝업/다이얼로그창)출력

먼저 http://malsup.com/jquery/block/#download 사이트로 이동하여 jquery blockui를 다운로드 합니다. 

다운로드시에 마우스 우클릭을 통해 다른이름으로 링크저장으로 파일을 저장하시면 됩니다. 

일반적으로 좌클릭을 했을때는 해당 소스 상세보기 페이지로 이동하기 때문에 우클릭으로 다운로드

해주시면 될거 같네요. 

다운로드한 jquery.blockUI.js 파일을 프로젝트에 넣어 보도록 하겠습니다. 

저같은 경우는 resource/jquery_blockui/jquery.blockUI.js로 경로를 지정했습니다.

이제 파일을 include하고 스크립트 및 body 소스를 기재하면 끝입니다.

include 파일

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/resources/jquery_blockui/jquery.blockUI.js"></script>

자신이 지정한 경로를 확인해 해당 경로를 지정해주시면 됩니다. 

스크립트 소스

<script>
 $(function(){
  $("#btn").click(function(){
   //잠깐 나타났다가 사라지는 함수
   //$.growlUI('타이틀' , '내용');
   $.blockUI({
    //html태그를 문자열로 적용해도 무관합니다.
    //message : "<table><tr><td>테스트테스트</td></tr></table>"
    message : $('#modal')
    //css설정
    ,css : {
     width : '500px',
     height : '300px'
    }
    //모달창 외부 클릭시 닫기
    ,onOverlayClick : $.unblockUI
   }); //$.blockUI
  }); //#btn.click
  $("#close").click(function(){
   //모달창 닫기
   $.unblockUI();
  }); //close.click
 }); //start
</script>

 body 소스

<input type="button" id="btn" value="창열기" />
 <div id="modal" style="display:none; cursor:pointer;">
  모달창입니다.
  <br/>
  <input type="button" id="close" value="닫기" />
 </div>

모든 소스가 작성되었으면 실행화면을 통해 정상적으로 출력되는지 확인해 보도록 하겠습니다.

창열기 버튼을 클릭했을때 정상적으로 모달창이 뜨는것을 확인했습니다.

닫기 버튼을 눌르거나 외부(회색)를 클릭하면 종료됩니다.

기본 샘플로 만들어본 모달창이라 조금 허접한 느낌적인 느낌이지만

옵션 URL : http://malsup.com/jquery/block/#options

사이트로 이동하여 조금더 자세하게 공부해서 적용시키면 좀더 멋진 모달창을 만들수 있을거라 생각되네요~

감사합니다.