> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/ui-ux-guide/patterns/popup-ui-guide.md).
# Popup UI Guide
Popups are used within the workspace to query data or process a specific task.
The screen composition additionally created within a popup is the same as the workspace screen's areas.
Window popups provide action buttons such as \[Save] when the same processing as the business screen is required.
***
## Popup Sizes
Window popups support the following three sizes.
* Minimum size: 500px\* 600px
* Default size: 600px\*800px
* Maximum size: 90% of the screen ratio
* Tree popup size: 380px\*560px
## Using Grids in Popups
1. After entering search conditions in a popup and clicking the \[Search] button, data appears in the grid below.
2. Popup grids support scrolling; screen scrolling should allow only the fixed data area to scroll, excluding the search box.
3. Double-clicking a desired data row in the grid shows the data in the parent window and closes the popup.
4. Selecting a desired data row in the grid and clicking the \[Confirm] button shows the data in the parent window and closes the popup.
5. Clicking the \[Close] button closes the popup.
## Types of Popups
Three types of popups are provided.
### Window Popup
A popup called from the parent window that creates a new workspace outside the browser to handle related tasks. It can be handled as either Modal or Modaless depending on the task type. The size supports a minimum of 300px\*500px, and the maximum size must not exceed 90% of the screen.
### Modal Popup
Used when input values from CUD tasks in the popup window affect the parent screen; this popup type allows control of the parent screen after the popup closes.
### Layer Popup
The layer popup is a non-functional popup type used simply to provide information.
