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

await import('/components/actions/modal.js');
await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { h3, p, Modal, Button } = 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');

$('#example').content([trigger, modal]);

await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Modal, Button, h3, p } = tags;

const modalId = 'my_modal';

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

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

$('#example').content([trigger, modal]);

await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { $ } = Lightview;
const { Modal } = Lightview.tags;

const modalId = 'my_modal';

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

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

$('#example').content([trigger, modal]);

Confirmation Dialog

Modal with confirm/cancel actions

await import('/components/actions/modal.js');
await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, h3, p, Modal, Button } = 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({ style: 'display: flex; align-items: center; gap: 1rem' },
    Button({ 
        color: 'error',
        variant: 'outline',
        onclick: () => Modal.open(modalId)
    }, 'Delete Item'),
    p({ class: 'text-sm opacity-70' }, () => `Status: ${status.value}`),
    confirmModal
);

$('#example').content(demo);

await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { Modal, Button, 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 = {
    tag: Modal,
    attributes: { id: modalId },
    children: [
        {
            tag: Modal.Box,
            children: [
                { tag: h3, attributes: { class: 'text-lg font-bold' }, children: ['Are you sure?'] },
                { tag: p, attributes: { class: 'py-4' }, children: ['This action cannot be undone.'] },
                {
                    tag: Modal.Action,
                    children: [
                        { tag: Button, attributes: { color: 'ghost', onclick: handleCancel }, children: ['Cancel'] },
                        { tag: Button, attributes: { color: 'error', onclick: handleConfirm }, children: ['Delete'] }
                    ]
                }
            ]
        },
        { tag: Modal.Backdrop }
    ]
};

const demo = {
    tag: div,
    attributes: { style: 'display: flex; align-items: center; gap: 1rem' },
    children: [
        {
            tag: Button,
            attributes: {
                color: 'error',
                variant: 'outline',
                onclick: () => Modal.open(modalId)
            },
            children: ['Delete Item']
        },
        { tag: p, attributes: { class: 'text-sm opacity-70' }, children: [() => `Status: ${status.value}`] },
        confirmModal
    ]
};

$('#example').content(demo);

await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;
const { Modal } = Lightview.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,
        children: [
            {
                'Modal.Box': {
                    children: [
                        { h3: { class: 'text-lg font-bold', children: ['Are you sure?'] } },
                        { p: { class: 'py-4', children: ['This action cannot be undone.'] } },
                        {
                            'Modal.Action': {
                                children: [
                                    { Button: { color: 'ghost', onclick: handleCancel, children: ['Cancel'] } },
                                    { Button: { color: 'error', onclick: handleConfirm, children: ['Delete'] } }
                                ]
                            }
                        }
                    ]
                }
            },
            { 'Modal.Backdrop': {} }
        ]
    }
};

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

$('#example').content(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.