반응형

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");
      });
    });
  

설명

  1. #dialog: Dialog 창으로 사용될 HTML 요소입니다.
  2. autoOpen: false: Dialog가 자동으로 열리지 않도록 설정합니다.
  3. 버튼 클릭 시 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의 옵션과 이벤트를 조합하여 더욱 유연한 기능을 만들어 보세요.

반응형

+ Recent posts