Popup

Overview

The Popup component is a component that dynamically displays content at a specified position on the screen. It is used to create and display content in various popup forms such as modals, tooltips, and dropdown menus at the specified target position.

Key Features

1. Display Popup from Specified Element

You can display a popup based on a specific DOM element. The popup's position can be determined using the anchor element's position and size.

View Related Items

• Properties

  anchor, modal, anchorAlign, contentAlign, closeOnOutsideDown

• Methods

  open, close

---

2. Modal

You can display the popup as a modal that dims the background to emphasize the popup and restricts user interaction. Modals are useful for conveying important information or receiving user input.

View Related Items

• Properties

  modal

• Methods

  open, close

---

3. Event-based Popup Display

You can display a popup when events such as mouse over or click occur on a specific DOM element. You can set the event type and popup display conditions to handle various situations like tooltips.

View Related Items

• Properties

  anchor, anchorAlign, contentAlign, closeOnEvents, closeDelay

• Methods

  open, close

---

4. Popup Alignment

The popup component provides 9 content alignment options (Content Align) and 9 anchor alignment options (Anchor Align). By combining these two alignment options, users can finely adjust the popup's position as desired.

• Anchor Alignment

  Determines where the popup appears relative to a specific element on the screen. For example, you can place the popup at 9 different positions such as the top-left, center, or bottom-right of the reference element. This sets the 'external' position of the popup, defining how the entire popup will be aligned relative to the reference element.

• Content Alignment

  Determines where the content inside the popup is aligned within the popup area. For example, you can align the content at 9 different positions such as the top-left, center, or bottom-right of the popup area. This sets the 'internal' layout of the popup, defining how the content will be arranged within the popup window.

View Related Items

• Properties

  anchor, anchorAlign, contentAlign

• Methods

  open, close

Anchor Align

center center

Content Align

center center

Anchor

---

5. Popup Placement Methods

The popup component can flexibly set the popup reference point placement to display popups in optimal positions for various types and purposes. There are two main methods for setting popup positions.

• Anchor Element-based Placement (relative)

  The popup is added within the same parent container as the anchor element and is affected by the parent element's scroll or CSS styles. Suitable for components like tooltips, dropdowns, and speech bubbles.

• Full Screen-based Placement (global)

  The popup is added to the application's top-level (root) element. Mainly used for modals, notification windows, and full-screen popups.

---

6. Priority

When multiple popups are displayed simultaneously, you can set the priority of popups to determine which popup appears on top. Priority settings can visually emphasize more important popups to users or manage interactions between popups.

• priority

  You can set the priority numerically. The higher the value, the higher the priority of the popup, and popups with lower values are displayed behind. For example, priority=100 has higher priority than priority=50.

• alwaysOnTop

  When this property is set to true, the popup is always displayed at the top of the screen. Popups with this setting enabled are fixed at the top regardless of other popups.

View Related Items

• Properties

  priority, alwaysOnTop, contentAlign, offsetX, offsetY

• Methods

  open, close, toggle

---

7. Life Cycle

When a popup is opened and closed, the opening, opened, closing, and closed callbacks are called according to the state changes. You can use this to perform actions during the popup's creation and disappearance process.

• opening

  This callback is called when the popup opening process starts. The popup element is in a state before being added to the DOM, so you can perform initial settings or asynchronous data loading.
  Returning false or Promise<false> in this callback cancels the popup opening. You can use this to restrict popups from opening under certain conditions.

• opened

  This callback is called after the popup is completely opened. The popup element is in a state after being added to the DOM, so you can perform additional operations on the popup's internal elements.

• closing

  This callback is called right before the popup is closed. The popup element is in a state before being removed, so you can perform cleanup operations such as executing the closing animation or removing event listeners.
  Returning false or Promise<false> in this callback cancels the popup closing. You can use this to prevent popups from closing under certain conditions.

• closed

  This callback is called after the popup is completely closed. The popup element is in a state after being completely removed. You can perform resource release or memory cleanup operations.

View Related Items

• Properties

  anchor, anchorAlign

• Methods

  open, close, opening, opened, closing, closed

---

8. Auto Focus

This feature allows the popup to automatically set focus to a specific element inside the popup when it is opened. It is useful when you need to start a specific operation when the popup is opened.

• focusTarget

  Set as a popup property, and the popup will focus on a specific element when it is opened. It has higher priority than autofocus, so if focusTarget is set, it will focus on the element first.

• autofocus

  Set as an HTML element attribute, and the popup will focus on the first autofocus element when it is opened. If focusTarget is set, autofocus is ignored.

View Related Items

• Properties

  autoFocus, focusTarget

• Methods

  open, close, toggle

---

9. Nested Popup

The Nested Popup feature allows you to display another popup inside the popup, and it has a hierarchical structure internally. This allows you to maintain the parent-child relationship between popups and manage the priority on the screen.

---

10. Close on Outside Click

This feature provides the ability to close the popup automatically when you click outside the popup, improving user convenience.

View Related Items

• Properties

  closeOnOutsideDown

• Methods

  open, close

Click outside to close

---

11. Prevent Popup from Moving Outside the Viewport

This feature adjusts the position to prevent the popup from moving outside the viewport, maintaining readability.

---

12. Close with ESC Key

This feature allows the popup to close when the ESC key is input, improving keyboard accessibility and allowing quick operations.

View Related Items

• Properties

  closeOnEscape

• Methods

  open, close

Click ESC to close

---