API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/Modal

Modal

Flexible modal dialog with glass morphism and keyboard support

🔧 Props

Property	Type	Default	Description
id	string	modal	Unique identifier
title	string	undefined	Modal title (creates header with close button)
closeFunction	function	undefined	Function to call when closing modal
closeOnBackdrop	boolean	true	Close modal when clicking backdrop
class	string	-	CSS classes for modal card

💻 Examples

Simple Modal

javascript•Simple Modal

const showModal = van.state(false);

return div(
  Button({ onclick: () => showModal.val = true }, 'Open Modal'),
  () => showModal.val ? Modal({
    title: 'Modal title',
    closeFunction: () => showModal.val = false,
  },
    h2({class: 'text-base font-semibold mb-2'}, 'Modal heading'),
    p({class: 'text-sm text-smoke mb-6'}, 'Modal content - Any content can be shownn here'),
    Button({ onclick: () => showModal.val = false }, 'Close')
  ) : ''
);

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

🔗 Related

Explore vwf

Discover what vwf can do