jQuery blockUI 플러그인을 이용하여 레이어팝업(모달) 만들기

이번에 소개하고자 하는 플러그인은 BlockUI라는 jQuery플러그인입니다.

레이어 팝업만들기에 유용한 플러그인이랍니다~

하단 링크를 통해서 다운로드 받으실 수 있습니다.

다운로드 : https://github.com/malsup/blockui/

우측을보시면 Download ZIP이라는 버튼이 있는데 클릭합니다.

압축해제후 jquery.blockUI.js 이란 파일을 프로젝트 경로에 넣어줍니다.

위와같은 구조로 예를 들기위해 js파일을 root 경로에 위치하였습니다.

blockUI는 레이아웃팝업을 쉽게지원해주는 플러그인이기도 하며 

AJAX 호출하는동안 화면을 보호하기 위한 목적에도 사용이 됩니다.

호출명령어는 

//BLOCKUI 화면 출력
$.blockUI({//속성추가});
//BLOCKUI 화면 제거
$.unblockUI();

입니다.

레이어 팝업에 표출시킬 경우 보여주고자 하는 태그들은 message 속성에 정의를 해주거나 body 태그내에 레이아웃을 제작한 다음 display:none; 속성을 style 속성에 정의를 해준 후 해당 레이아웃을 불러올수도 있습니다.

또한 css속성을 이용하여 레이어팝업의 스타일을 별도로 지정하는것이 가능합니다.

그리고 전체 화면에 레이어팝업을 띄울뿐만 아니라 특정 엘리먼트 영역에 레이어팝업을 띄워주게도 지원을 합니다.

1. 전체 화면에 blockUI적용

2. 일부 엘리먼트영역에 blockUI적용

3. blockUI 영역에 별도의 CSS 적용

이 3가지를 다루어 보도록 하겠습니다.

전체 화면을 blockUI 감싸기

blockUI 플러그인을 사용하기 위해서는 jQuery include는 필수겠죠? 

저는 CDN을 이용하여 jQuery 를 사용하도록 하겠습니다.

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

버튼 클릭하여 모달창을 띄운 후 모달창에 존재하는 닫기 버튼을 클릭하여 모달을 제거하도록 해보겠습니다.

HTML 코드

<input type="button" id="openmodal" value="모달띄우기"/>

자바스크립트 코드

$(function(){
	$("#openmodal").click(function(){
		$.blockUI({message : "<input type='button' value='모달닫기' onclick='removeModal()' />"})
	})
})
function removeModal(){
	$.unblockUI();
}

코드작성이 완료 되셨다면 실행을 해보도록 하겠습니다.

전체화면 감싸는 BLOCKUI 실행결과

브라우저전체를 어두운 바탕으로 감싼다음 중앙에 닫기 버튼이 생성되었고 

닫기버튼을 클릭하여 모달창을 사라지게 하였습니다.

특정 엘리먼트를 blockUI로 감싸기

다음은 특정 엘리먼트 내에만 모달창을 띄워보도록 하겠습니다.

특정 엘리먼트영역에 모달창을 띄우고 사라지게 하는 함수는 다음코드를 적용해주셔야 합니다.

//엘리먼트내에 BLOCKUI 화면 출력
$("selector").block(//option);
//엘리먼트내에 BLOCKUI 화면 제거
$("selector").unblock();

blockUI함수대신 block함수를 

unblockUI대신 unblock 함수를

 사용하면됩니다.

 앞에 셀렉터를 적용해주시면 되겠습니다.

HTML코드

<input type="button" id="openmodal" value="모달띄우기"/>
<br/>
<div id="blocklayer">여기만<br/>모달창으로 감쌉니다</div>

자바스크립트코드

$(function(){
	$("#openmodal").click(function(){
		$("#blocklayer").block({message : "<input type='button' value='모달닫기' onclick='removeModal()' />"})
	})
})
function removeModal(){
	$("#blocklayer").unblock();
}

특정엘리먼트를 감싸는 BLOCKUI 실행결과

마지막으로 css 속성을 이용하여 모달의 스타일을 변경해보도록 하겠습니다.

코드는 다음과같이 작성하시면 되겠습니다.

$("셀렉터").block({
	message : "모달에 출력할 메시지",   
	css: { 
		border: '3px solid #a00'
	} 
})
//또는
$.blockUI({
	message : "모달에 출력할 메시지",   
	css: { 
		border: '3px solid #a00'
	}
})

전체페이지에 적용할지 혹은 특정 엘리먼트레이아웃에 적용할지로 나누었지만 

실제 속성 적용은 모두 동일합니다.

그럼 유용하게 사용하세요~

by 개발로짜