jQuery blockUI를 이용한 모달창(일명 레이어팝업 또는 다이얼로그창) 출력하기

예전에 jqueryUI를 통한 레이어팝업(다이얼로그)를 소개했었다

2014/06/20 - [자바스크립트이야기/jQuery UI 소개] - [jQueryUI - dialog] 레이어 팝업을 띄워보자

이번에는 blockUI 플러그인을 이용하여 레이어팝업을 띄워보도록 하겠다.

사용 스크립트

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery blockUI [다운로드]

다운로드를 받았으면 다음과 같이 프로젝트 생성 후  blockUI.js와 index.jsp를 위치시켰다

INCLUDE 파일

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

body 내에 들어갈 샘플 HTML 코드

<input type="button" id="btn" value="모달창띄우기"/>
<div id="question" style="display:none; cursor: pointer;"> 
<h1>모달창확인</h1> 
<input type="button" id="closebtn" value="닫기" /> 
</div>

이벤트 코드 스크립트

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

실 행 화 면

1) 초기실행화면

2) 버튼 클릭후 모달창 출력화면

위 샘플링은 blockUI의 간단한 맛보기이고 자세한 상세옵션들을 하나둘씩 적용하면 훌륭한 모달창을 띄울 수 있을 것이다.

blockUI 옵션URL

http://malsup.com/jquery/block/#options

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!