웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트의 제이쿼리ui에는 다양한 ui 플러그인이 존재하는데 이중에서 dialog 제이쿼리 ui 구현에 대하여 알아보자. 우선 다이얼로그를 만들게 되면 페이지에 팝업창을 띄우게 된다. 팝업창은 모달창 형태를 띄며 이를 만약 직접 만들 경우 시간 및 노력이 많이들지만 이 플러그인을 사용할 경우 매우 손쉽게 구현할 수 있어 매우 편리하다.
# jQuery Dialog 설치 및 다운로드하기
일단 다운로드를 해야하는데 제이쿼리 플러그인 dialog는 아래의 경로에서 다운 받을 수 있다.* 제이쿼리ui Download 바로가기 > https://jqueryui.com/download/
* 제이쿼리ui dialog 페이지 바로가기 > https://jqueryui.com/dialog/
스크린샷) 좌측 중앙처럼 창을 간단하게 띄울 수 있다다이얼로그를 실행할 경우 아래의 스크린샷처럼 모달형태의 팝업을 띄울 수 있는데 이 다이얼로그는 몇 가지의 기능을 가지고 있다. 이 기능들은 옵션을 통해 추가하거나 제외할 수 있다. 아래는 dialog에서 사용 가능한 기능들이다.
1. 드래그 가능(Draggable)
2. 모달형태의 bg 백그라운드 설정 기능
3. 리사이즈 가능한 기능
사실 위에 언급한 기능 외에도 상당히 많은 ... 매우 편리한 기능들을 제공하고 있다. 그 중에서도 위 세가지 기능은 가장 큰 특징이라고 할 수 있는 부분이다. 만약 이 기능들을 직접 코딩할 경우 상당한 노력이 요구되기 때문이다. 특히 모달창을 리사이즈 할 수 있는 기능도 설정할 수 있는데 이 부분도 매우 편리한 기능 중 하나이다. 개인적으로 드래그가 가능한 점이 좋아서 많이 사용한다.
# dialog 예제소스 보기dialog 창을 만들기 위한 방법은 의외로 간단하다. 만약 아래와 같이 dialog라는 id를 가진 엘리먼트가 있다면 이 id에 dialog() 메소드를 사용해 실행하면 된다. 아래의 소스코드를 보자.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog">
<p>다이얼로그 모달창을 띄우는 간단한 방법!!</p>
</div>
<script>
$('#dialog').dialog();
</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog">
<p>다이얼로그 모달창을 띄우는 간단한 방법!!</p>
</div>
<script>
$('#dialog').dialog();
</script>
위 방법을 사용할 경우 기본적인 다이얼로그창이 띄어진다. 이때 몇가지 옵션이 설정 가능한다. 먼저 제목인 title을 추가하는 방법은 아래와 같다.
$('#dialog').dialog({
title: '다이얼로그 제목을 넣자',
modal: true,
width: '300',
height: '300'
});
title: '다이얼로그 제목을 넣자',
modal: true,
width: '300',
height: '300'
});
위 방법에서는 타이틀 제목을 추가하였다. 그 아래에 보면 modal: true; 옵션이 추가되어 있는데 이 옵션을 사용하면 뒤에 백그라운드 bg가 나타나게 된다. 즉, 모달 뒷 부분이 어둡게 되어 팝업 다이얼로그가 더욱 강조될 수 있다.
또한 width, height 값을 위와 같이 사용하여 정할 수 있다. 위 방법처럼 사용하는 방법 외에 'option'을 사용하여 정할 수도 있는데 아래 방법을 보자.
$('#dialog').dialog('option', 'width', '300');
위 방법은 width 값을 설정하였는데 맨 위에 위치한 방법과 동일한 결과가 나타나게 된다. 또 다른 설정 방법이다.
# 팝업안에 팝업을 띄우는 방법
dialog ui를 사용하여 팝업을 띄운 후 그 안에 또 다른 팝업을 띄우고 싶다면 어떻게 해야할까? 여기서 나중에 띄운 팝업의 이전 팝업보다 위에 위치해야한다. 앞에 언급한 것 처럼 modal 옵션을 사용하여 이전 팝업을 어둡게 가려주는 방법이 필요하다.
스크린샷) 이처럼 먼저 열린 팝업창은 어둡게 표시됨이 경우 css의 z-index 속성을 사용하면 되는데 나중에 띄운 방법에 z-index 속성을 지정하기 위한 클래스를 설정하는 것이 가장 좋은 방법이다. dialog의 옵션으로 아래처럼 css를 사용한다.
<style>
.innerPopup {
z-index: 2222;
}
</style>
<script>
$("#dialog").dialog({
dialogClass: "innerPopup"
})
</script>
.innerPopup {
z-index: 2222;
}
</style>
<script>
$("#dialog").dialog({
dialogClass: "innerPopup"
})
</script>
이제 나중에 생긴 팝업, 모달창이 더 상위의 위계를 가지고 위치하게 된다. 띄어쓰기를 구분자로 여러개의 클래스명 지정도 가능하다.
<script>
$("#dialog").dialog({
dialogClass: "innerPopup modal classplus"
})
$("#dialog").dialog({
dialogClass: "innerPopup modal classplus"
})
여기까지 몇 가지 방법에 대하여 알아보았는데 더 자세한 내용은 아래의 링크에서 사용가능하다. 아래 링크는 더 많은 기능을 제공하는 옵션, 메소드등을 보여주는데 여기에는 애니메이션 효과도 있다. 아래 링크를 참조하자.
* dialog 정보 더 보기 - http://api.jqueryui.com/dialog/#method-open
아래의 글도 찾고 계시지 않나요?
