# layui/layer

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/layui-layer).**

8,196 stars · 2,701 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/layui/layer
- Homepage: https://layui.dev/2.7/layer/
- awesome-repositories: https://awesome-repositories.com/repository/layui-layer.md

## Topics

`alert` `confirm` `dialog` `layer` `layui` `tips`

## Description

This project is a JavaScript UI component library and frontend utility toolkit. It serves as a web modal framework and popup library, providing a specialized system for rendering interactive dialogs, overlays, and layered interfaces over web page content.

The library is distinguished by its comprehensive set of overlay tools, including alert dialogs, confirmation prompts, and the ability to embed external content via iframes. It also features a responsive twelve-column grid system for cross-device layout compatibility and an internal modular dependency management system for on-demand loading of functional modules.

The capability surface extends to structured data display through tables, tree views, and timelines, as well as an extensive collection of form elements like date pickers, range sliders, and file upload workflows. Additional utilities cover template-based content injection, XSS sanitization, browser environment detection, and local storage management.

## Tags

### User Interface & Experience

- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Implements a responsive twelve-column grid system with breakpoints for cross-device layout compatibility. ([source](https://layui.dev/2.7/docs/element/layout.html))
- [Web Modal Frameworks](https://awesome-repositories.com/f/user-interface-experience/web-modal-frameworks.md) — Serves as a comprehensive framework for rendering and positioning customizable popups, alerts, and floating layers.
- [Customizable Popups](https://awesome-repositories.com/f/user-interface-experience/window-based-overlay-rendering/floating-ui-overlays/customizable-popups.md) — Provides a specialized system for rendering customizable overlay windows and layered interfaces. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Dynamic Data Tables](https://awesome-repositories.com/f/user-interface-experience/dynamic-data-tables.md) — Creates data tables from API endpoints or static arrays with pagination and custom headers. ([source](https://layui.dev/2.7/docs/modules/table.html))
- [Column-Based Responsive Grids](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/column-based-responsive-grids.md) — Provides a twelve-column responsive grid system with predefined breakpoints for mobile, tablet, and desktop screens.
- [Alert Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs.md) — Displays modal alert windows that notify users and require interaction to dismiss. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Navigation Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-menus.md) — Implements a comprehensive set of navigation menus including sidebars and nested dropdowns. ([source](https://layui.dev/2.7/docs/element/nav.html))
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Provides pre-styled reusable interface elements and interaction patterns for building web interfaces.
- [User Confirmation Dialogs](https://awesome-repositories.com/f/user-interface-experience/user-confirmation-dialogs.md) — Prompts users for explicit approval via dialogs before executing sensitive application actions. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Z-Index Management](https://awesome-repositories.com/f/user-interface-experience/window-management/z-index-management.md) — Manages the visual stacking order of popups and tooltips to maintain a consistent hierarchy over page content.
- [DOM-Based Window Management](https://awesome-repositories.com/f/user-interface-experience/window-managers/dom-based-window-management.md) — Renders customizable overlay windows and modals by injecting HTML content or iframes directly into the DOM.
- [Button Styles](https://awesome-repositories.com/f/user-interface-experience/button-styles.md) — Formats HTML elements as buttons with customizable themes, sizes, rounded corners, and icons. ([source](https://layui.dev/2.7/docs/element/button.html))
- [Chronological Timelines](https://awesome-repositories.com/f/user-interface-experience/chronological-timelines.md) — Displays a sequence of chronological events on a vertical axis to represent history over time. ([source](https://layui.dev/2.7/docs/element/timeline.html))
- [Collapsible Panels](https://awesome-repositories.com/f/user-interface-experience/collapsible-panels.md) — Creates expandable content areas that save screen space by limiting the number of active sections. ([source](https://layui.dev/2.7/docs/element/panel.html))
- [Color Pickers](https://awesome-repositories.com/f/user-interface-experience/color-pickers.md) — Provides a color selection interface supporting hex, rgb, and rgba modes with alpha transparency. ([source](https://layui.dev/2.7/docs/base/changelog.html))
- [Common UI Element Styling](https://awesome-repositories.com/f/user-interface-experience/common-ui-element-styling.md) — Provides baseline visual styling for common HTML elements, including colors and shapes. ([source](https://layui.dev/2.7/docs/base/element.html))
- [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — Provides interactive pickers for selecting years, months, days, and times in various formats. ([source](https://layui.dev/2.7/docs/modules/laydate.html))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/dropdown-menus.md) — Provides interactive menus that reveal nested sub-menus and custom templates upon user trigger. ([source](https://layui.dev/2.7/docs/modules/dropdown.html))
- [Input Value Assignment](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling/dynamic-input-bindings/form-value-persistence/input-value-assignment.md) — Enables programmatic reading and writing of form values using data objects. ([source](https://layui.dev/2.7/docs/modules/form.html))
- [Form Input Components](https://awesome-repositories.com/f/user-interface-experience/form-input-components.md) — Renders checkboxes, radio buttons, and toggle switches with customizable labels and states. ([source](https://layui.dev/2.7/docs/element/form.html))
- [Form Input Handling](https://awesome-repositories.com/f/user-interface-experience/form-input-handling.md) — Handles the validation and batch assignment of values for select menus, checkboxes, and switches. ([source](https://layui.dev/2.7/docs/base/changelog.html))
- [Form Input Validation](https://awesome-repositories.com/f/user-interface-experience/form-input-validation.md) — Enforces data integrity during form submission using built-in rules or custom regular expressions. ([source](https://layui.dev/2.7/docs/modules/form.html))
- [Form Submission Management](https://awesome-repositories.com/f/user-interface-experience/form-submission-management.md) — Triggers form submissions and executes callbacks programmatically without requiring user clicks. ([source](https://layui.dev/2.7/docs/modules/form.html))
- [Iframe Overlays](https://awesome-repositories.com/f/user-interface-experience/iframe-overlays.md) — Enables loading remote URLs within an iframe layer to display external pages inside a popup. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Input Prompts](https://awesome-repositories.com/f/user-interface-experience/input-prompts.md) — Opens modal dialogs with text input fields to capture brief user information. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [UI Tooltips](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-tooltips/anchor-attachments/ui-tooltips.md) — Provides small popup tips that anchor themselves to specific page elements. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Layout Utility Classes](https://awesome-repositories.com/f/user-interface-experience/layout-utility-classes.md) — Provides structural layout utilities for centering blocks and managing inline-block elements. ([source](https://layui.dev/2.7/docs/base/element.html))
- [Pagination Controls](https://awesome-repositories.com/f/user-interface-experience/navigation-components/pagination-controls.md) — Provides navigation controls that break large datasets into discrete, sequential pages. ([source](https://layui.dev/2.7/docs/base/changelog.html))
- [UI Element Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/page-headers/page-action-integrations/page-element-injections/ui-element-visibility-toggles.md) — Provides utilities to toggle the visibility and disabled states of UI elements dynamically. ([source](https://layui.dev/2.7/docs/base/element.html))
- [Content Panels](https://awesome-repositories.com/f/user-interface-experience/panel-groups/content-panels.md) — Displays independent containers or card-style surfaces with shadows to organize and highlight page sections. ([source](https://layui.dev/2.7/docs/element/panel.html))
- [Predefined Animation Effects](https://awesome-repositories.com/f/user-interface-experience/predefined-animation-effects.md) — Provides a set of predefined CSS animation effects such as fades, slides, and scales. ([source](https://layui.dev/2.7/docs/element/anim.html))
- [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Creates range sliders with customizable intervals, value inputs, and real-time callbacks. ([source](https://layui.dev/2.7/docs/base/changelog.html))
- [Rating Inputs](https://awesome-repositories.com/f/user-interface-experience/rating-inputs.md) — Provides a selectable star-based interface for user feedback with custom colors and half-star increments. ([source](https://layui.dev/2.7/docs/modules/rate.html))
- [Select Dropdowns](https://awesome-repositories.com/f/user-interface-experience/select-dropdowns.md) — Builds dropdown select menus with support for option grouping, disabled items, and integrated search. ([source](https://layui.dev/2.7/docs/element/form.html))
- [Sidebars](https://awesome-repositories.com/f/user-interface-experience/sidebars.md) — Provides persistent floating sidebars with icons and callbacks for page navigation. ([source](https://layui.dev/2.7/docs/modules/util.html))
- [Static Table Renderers](https://awesome-repositories.com/f/user-interface-experience/static-table-renderers.md) — Renders basic tabular data using HTML attributes to control borders and zebra-striping. ([source](https://layui.dev/2.7/docs/element/table.html))
- [Tabbed Containers](https://awesome-repositories.com/f/user-interface-experience/tabbed-containers.md) — Renders popups containing multiple tabs to organize distinct sets of content. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Provides a system for composing interactive tab panels with programmatic switching and management. ([source](https://layui.dev/2.7/docs/modules/element.html))
- [Text Input Fields](https://awesome-repositories.com/f/user-interface-experience/text-input-fields.md) — Renders single-line text fields, password masks, and multi-line text areas for data entry. ([source](https://layui.dev/2.7/docs/element/form.html))
- [Toast Notifications](https://awesome-repositories.com/f/user-interface-experience/toast-notifications.md) — Displays non-blocking notification toasts that automatically dismiss after a specified time. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Tree Views](https://awesome-repositories.com/f/user-interface-experience/tree-views.md) — Renders hierarchical data structures with support for infinite nesting and connection lines. ([source](https://layui.dev/2.7/docs/base/changelog.html))
- [Typography Styling](https://awesome-repositories.com/f/user-interface-experience/typography-styling.md) — Controls font sizes, text colors, and text overflow handling for specific interface regions. ([source](https://layui.dev/2.7/docs/base/element.html))
- [Color Palettes](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palettes.md) — Ships with a curated set of primary and secondary color palettes for interface consistency. ([source](https://layui.dev/2.7/docs/element/color.html))
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators.md) — Renders visual loading overlays to indicate that background processes are active. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Slider Inputs](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/numeric-input-controls/slider-inputs.md) — Provides draggable sliders for selecting single values or ranges with custom step intervals. ([source](https://layui.dev/2.7/docs/modules/slider.html))
- [UI Skinning](https://awesome-repositories.com/f/user-interface-experience/ui-skinning.md) — Allows applying custom visual skins to popup layers and dialogs using CSS class definitions. ([source](https://layui.dev/2.7/docs/modules/layer.html))
- [Vector Icons](https://awesome-repositories.com/f/user-interface-experience/vector-icons.md) — Integrates scalable vector icons that can be customized via CSS for size and color. ([source](https://layui.dev/2.7/docs/element/icon.html))

### Part of an Awesome List

- [Data Tables](https://awesome-repositories.com/f/awesome-lists/data/data-tables.md) — Displays structured data with fixed headers, column sorting, pagination, and cell editing. ([source](https://layui.dev/2.7/docs/base/changelog.html))
- [Modals and Popups](https://awesome-repositories.com/f/awesome-lists/devtools/modals-and-popups.md) — Provides a specialized set of interactive dialogs including alerts, confirms, prompts, and iframe windows.

### Development Tools & Productivity

- [Utility Toolkits](https://awesome-repositories.com/f/development-tools-productivity/utility-toolkits.md) — Offers a comprehensive toolkit of helpers for date formatting, XSS sanitization, and browser detection.
- [Global Configurations](https://awesome-repositories.com/f/development-tools-productivity/global-configurations.md) — Registers custom modules via a global configuration object to share functionality across the entire application.
- [Modular Library Extensions](https://awesome-repositories.com/f/development-tools-productivity/modular-library-extensions.md) — Extends library functionality by registering custom modules via a global configuration. ([source](https://layui.dev/2.7/docs/base/modules.html))

### Web Development

- [UI Component Libraries](https://awesome-repositories.com/f/web-development/ui-component-libraries.md) — Ships a collection of pre-styled elements including data tables, form inputs, and navigation menus.
- [Admin Layout Components](https://awesome-repositories.com/f/web-development/admin-dashboard-frameworks/admin-layout-components.md) — Provides a standardized layout structural system designed specifically for backend administration interfaces. ([source](https://layui.dev/2.7/docs/element/layout.html))
- [Asynchronous Module Loading](https://awesome-repositories.com/f/web-development/asynchronous-module-loading.md) — Implements an on-demand module loading system that executes callbacks once all required dependencies are resolved.
- [Custom Module Definitions](https://awesome-repositories.com/f/web-development/custom-module-definitions.md) — Defines JavaScript modules with specific interfaces and optional dependencies for application-wide use. ([source](https://layui.dev/2.7/docs/base/infrastructure.html))
- [Form Handling](https://awesome-repositories.com/f/web-development/form-handling.md) — Provides tools for constructing structured input layouts with built-in validation and programmatic submission.
- [Form Layouts](https://awesome-repositories.com/f/web-development/form-handling/form-layouts.md) — Creates structured input layouts using standardized CSS classes and HTML components for consistent styling. ([source](https://layui.dev/2.7/docs/element/form.html))
- [UI Template Injection](https://awesome-repositories.com/f/web-development/template-data-binding/template-data-injection/ui-template-injection.md) — Generates formatted HTML strings by injecting data objects into templates with XSS sanitization.
- [Template Logic](https://awesome-repositories.com/f/web-development/template-logic.md) — Runs JavaScript statements and conditional logic within templates to control output based on data. ([source](https://layui.dev/2.7/docs/modules/laytpl.html))