반응형
jQuery UI의 Dialog 위젯은 팝업 창을 손쉽게 구현할 수 있는 강력한 도구입니다. Dialog는 사용자 인터페이스를 개선하고 알림, 입력 폼, 확인 창 등의 기능을 제공하는 데 자주 사용됩니다. 이번 글에서는 jQuery Dialog를 활용한 다양한 예제를 다룹니다.
1. 기본 Dialog 생성
jQuery Dialog를 사용하려면 먼저 jQuery와 jQuery UI 라이브러리를 로드해야 합니다.
HTML 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="dialog" title="Basic Dialog">
<p>This is a simple dialog box.</p>
</div>
<button id="open-dialog">Open Dialog</button>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#open-dialog").click(function() {
$("#dialog").dialog("open");
});
});
</script>
</body>
</html>
This is a simple dialog box.
Open Dialog
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#open-dialog").click(function() {
$("#dialog").dialog("open");
});
});
설명
- #dialog: Dialog 창으로 사용될 HTML 요소입니다.
- autoOpen: false: Dialog가 자동으로 열리지 않도록 설정합니다.
- 버튼 클릭 시 Dialog가 열리도록 이벤트를 연결합니다.
2. 모달(Dialog) 설정
Dialog를 모달로 설정하면 배경이 비활성화되고 사용자 인터랙션이 제한됩니다.
HTML 구조
<div id="modal-dialog" title="Modal Dialog">
<p>This is a modal dialog.</p>
</div>
<button id="open-modal-dialog">Open Modal Dialog</button>
JavaScript 코드
$(function() {
$("#modal-dialog").dialog({
autoOpen: false,
modal: true
});
$("#open-modal-dialog").click(function() {
$("#modal-dialog").dialog("open");
});
});
결과
모달 Dialog는 사용자가 팝업 창을 닫기 전까지 다른 요소와 상호작용할 수 없도록 제한합니다.
3. 커스텀 버튼 추가
Dialog에 사용자 정의 버튼을 추가하면 더욱 다양한 동작을 구현할 수 있습니다.
HTML 구조
<div id="custom-buttons-dialog" title="Custom Buttons">
<p>Would you like to proceed?</p>
</div>
<button id="open-custom-dialog">Open Custom Dialog</button>
JavaScript 코드
$(function() {
$("#custom-buttons-dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Yes": function() {
alert("You clicked Yes!");
$(this).dialog("close");
},
"No": function() {
alert("You clicked No!");
$(this).dialog("close");
}
}
});
$("#open-custom-dialog").click(function() {
$("#custom-buttons-dialog").dialog("open");
});
});
설명
- buttons 옵션을 사용하여 버튼을 정의합니다.
- 각 버튼에 클릭 이벤트와 동작을 설정합니다.
4. 크기와 위치 설정
Dialog의 크기와 위치를 사용자 정의할 수 있습니다.
HTML 구조
<div id="size-position-dialog" title="Custom Size & Position">
<p>This dialog has custom size and position.</p>
</div>
<button id="open-size-dialog">Open Dialog</button>
JavaScript 코드
$(function() {
$("#size-position-dialog").dialog({
autoOpen: false,
width: 500,
height: 300,
position: { my: "center top", at: "center top+50", of: window }
});
$("#open-size-dialog").click(function() {
$("#size-position-dialog").dialog("open");
});
});
설명
- width와 height로 크기를 설정합니다.
- position 옵션으로 위치를 설정합니다.
- my: Dialog의 기준점.
- at: 대상 요소의 기준점.
5. Ajax를 활용한 동적 데이터 로드
Dialog 내부의 콘텐츠를 동적으로 로드할 수 있습니다.
HTML 구조
<div id="ajax-dialog" title="Dynamic Content">
<p>Loading...</p>
</div>
<button id="load-data">Load Data</button>
JavaScript 코드
$(function() {
$("#ajax-dialog").dialog({
autoOpen: false,
modal: true
});
$("#load-data").click(function() {
$("#ajax-dialog").dialog("open");
$("#ajax-dialog").load("/path/to/your/data.html");
});
});
설명
- $("#ajax-dialog").load()를 사용하여 외부 HTML 파일을 동적으로 로드합니다.
6. 애니메이션 효과 추가
Dialog 열기와 닫기에 애니메이션 효과를 추가할 수 있습니다.
HTML 구조
<div id="animated-dialog" title="Animated Dialog">
<p>This dialog opens with an animation effect.</p>
</div>
<button id="open-animated-dialog">Open Animated Dialog</button>
JavaScript 코드
$(function() {
$("#animated-dialog").dialog({
autoOpen: false,
show: { effect: "fade", duration: 800 },
hide: { effect: "slide", duration: 800 }
});
$("#open-animated-dialog").click(function() {
$("#animated-dialog").dialog("open");
});
});
설명
- show와 hide 옵션에 효과와 지속 시간을 설정합니다.
7. 드래그와 리사이즈
Dialog는 기본적으로 드래그 가능하며, 크기 조정 기능을 활성화할 수 있습니다.
HTML 구조
<div id="resizable-dialog" title="Resizable Dialog">
<p>You can drag and resize this dialog.</p>
</div>
<button id="open-resizable-dialog">Open Dialog</button>
JavaScript 코드
$(function() {
$("#resizable-dialog").dialog({
autoOpen: false,
draggable: true,
resizable: true
});
$("#open-resizable-dialog").click(function() {
$("#resizable-dialog").dialog("open");
});
});
설명
- draggable: true: Dialog를 드래그할 수 있습니다.
- resizable: true: Dialog 크기 조정이 가능합니다.
마무리
jQuery Dialog는 다양한 사용자 인터페이스 요소를 구현할 수 있는 강력한 도구입니다. 위 예제들을 바탕으로 프로젝트의 요구사항에 맞는 팝업 창을 손쉽게 구현할 수 있습니다. Dialog의 옵션과 이벤트를 조합하여 더욱 유연한 기능을 만들어 보세요.
반응형
'개발 > Javascript' 카테고리의 다른 글
JQuery로 구현하는 동적 콤보박스 연결 예제 (0) | 2025.01.14 |
---|---|
JavaScript를 활용한 Drag and Drop 기능 구현 (0) | 2025.01.08 |
jquery를 이용한 특정영역에 input Max값 Min값 구하기 (0) | 2022.07.05 |
스크립트 엑셀 Export (0) | 2022.05.20 |
datepicker 관련 스크립트 제어 (0) | 2022.05.19 |