1. Components
  2. modal

Modal

Blocking dialog window for critical interactions or forms.

Demo

Installation

  1. Add the component

    Shell 
    flexi-cli add modal

  2. Install Modal

    This component require JS. By default we're using our own Interactive Component Library Flexilla . Install this only if you didn't accept dependencies installation during component addition.
    1. With Alpine
      2. Shell 
      npm i @flexilla/alpine-modal

      Add plugin in flexilla.js

      flexilla.js 
      import AlpineModal from "@flexilla/alpine-modal"

Alpine.plugin(AlpineModal)
    2. Without Alpine
      3. Make sure that the modal package is not installed
      Shell 
      npm i @flexilla/modal

      Initialize modal in flexilla.js

      flexilla.js 
      import { Modal } from "@flexilla/modal"

// init Modal for all Element with data-app-modal attribute
Modal.autoInit('[data-app-modal]')

References

Modal Component

The modal component creates a dialog box that appears on top of the page content.

Prop Type Default Description
modalId string -
A unique identifier for the modal. Required for proper functionality.
backdropClass string ''
Additional CSS classes for the modal's backdrop/overlay.
overlayBlured boolean true
When true, applies a blur effect to the backdrop.
closable boolean true
When true, the modal can be closed by clicking the close button or pressing ESC.
staticBackdrop boolean/string false
When true, the modal cannot be closed by clicking outside or pressing ESC.
scrollableBody boolean false
When true, allows the page to scroll while the modal is open.

Modal Content Component

Prop Type Default Description
size string 'md'
Controls the width of the modal. Options: 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'
closable boolean true
When true, shows a close button in the top-right corner.
noGutter boolean false
When true, removes the default padding from the modal content.

Subcomponents

Component Description
x-ui.modal.trigger
The clickable element that opens the modal. Must have 'modal-id' attribute matching the modal's 'modalId'.
x-ui.modal.content
The main container for the modal content. Handles sizing and basic styling.
x-ui.modal.header
Container for the modal header, typically containing the title and close button.
x-ui.modal.title
The title of the modal. Should be placed inside the header.
x-ui.modal.body
The main content area of the modal. Handles scrolling when content is too long.
x-ui.modal.footer
Container for action buttons at the bottom of the modal.
x-ui.modal.close
A button to close the modal. Inherits props from x-ui.button.

Events

Event Description
modal:the-id-of-your-modal:open
Dispatch this event from JS or Livewire to open the modal.
modal:the-id-of-your-modal:close
Dispatch this event from JS or Livewire to close the modal.

JavaScript API

To know more about the JavaScript API, check the Flexilla documentation.

Prev
Alert Dialog

Modal variation used...

Next
On this page