Modal

Modal is used to show a dialog or a box when you click a button. Uses the native HTML <dialog> element for accessibility.

Basic Example

Simple modal with open/close functionality


const { default: Modal } = await import('/components/actions/modal.js');
const { default: Button } = await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { h3, p } = tags;

const modalId = 'my_modal';

// Create the modal
const modal = Modal({ id: modalId },
    Modal.Box({},
        h3({ class: 'text-lg font-bold' }, 'Hello! 👋'),
        p({ class: 'py-4' }, 'This modal was created with Lightview components.'),
        Modal.Action({},
            Button({ onclick: () => Modal.close(modalId) }, 'Close')
        )
    ),
    Modal.Backdrop({})
);

// Create trigger button
const trigger = Button({ 
    color: 'primary',
    onclick: () => Modal.open(modalId)
}, 'Open Modal');

$('#demo').insert(trigger, modal);

Confirmation Dialog

Modal with confirm/cancel actions


const { default: Modal } = await import('/components/actions/modal.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, h3, p } = tags;

const status = signal('Ready');
const modalId = 'confirm_modal';

const handleConfirm = () => {
    status.value = '✅ Confirmed!';
    Modal.close(modalId);
};

const handleCancel = () => {
    status.value = '❌ Cancelled';
    Modal.close(modalId);
};

const confirmModal = Modal({ id: modalId },
    Modal.Box({},
        h3({ class: 'text-lg font-bold' }, 'Are you sure?'),
        p({ class: 'py-4' }, 'This action cannot be undone.'),
        Modal.Action({},
            Button({ color: 'ghost', onclick: handleCancel }, 'Cancel'),
            Button({ color: 'error', onclick: handleConfirm }, 'Delete')
        )
    ),
    Modal.Backdrop({})
);

const demo = div({ class: 'flex items-center gap-4' },
    Button({ 
        color: 'error',
        variant: 'outline',
        onclick: () => Modal.open(modalId)
    }, 'Delete Item'),
    p({ class: 'text-sm opacity-70' }, () => `Status: ${status.value}`),
    confirmModal
);

$('#demo').insert(demo);

Props

Prop	Type	Default	Description
`id`	string	-	Required unique ID for the modal
`open`	boolean \| function	false	Control open state (reactive)
`position`	string	'middle'	'top' \| 'middle' \| 'bottom'
`onClose`	function	-	Callback when modal closes

Static Methods

Method	Description
`Modal.open(id)`	Open a modal by its ID
`Modal.close(id)`	Close a modal by its ID

Sub-components

Component	Description
`Modal.Box`	The content container
`Modal.Action`	Container for action buttons (typically at bottom)
`Modal.Backdrop`	Click-to-close backdrop

Positions

Responsive Modal

Full-screen on mobile, centered on desktop.

For more examples, see the DaisyUI Modal documentation.