Requires David UI JS

Tailwind CSS Modal/Dialog

David UI's Modal component offers a sleek and accessible way to display overlays for alerts, forms, or additional content. Styled with Tailwind CSS, it supports customizable headers and footers for a polished user experience.

Explore our responsive Modal component examples, styled with Tailwind CSS, ideal for creating engaging web or mobile interfaces.

Basic Modal

This example showcases how to create a Tailwind CSS modal with a structured layout, including a header, dismiss button, and action buttons.

Modal Sizes

David UI's dialog component is versatile and it is coming with multiple size options (xs, sm, md, lg, xl, screen). Each size adapts seamlessly to fit diverse content requirements, ensuring responsiveness and consistent styling across applications.

Modal with Form

Try this example of the Dialog component for creating a sign-in form. Includes input fields for email and password, a "Remember Me" checkbox, and actionable buttons.

Modal with Image

A visually rich example of a Dialog component integrated with images. Includes features like a user profile section, image display, action buttons for downloading or sharing, and metrics for views and downloads. Ideal for image galleries or media-rich applications.

Web 3 Modal

Here is an example of how to create a wallet connection dialog for Web3 applications. It features popular wallet options like MetaMask, Coinbase, and Trust Wallet, presented with clear actions and helpful contextual information for users new to Ethereum wallets.

Long Modal

This example showcases a Dialog component designed for handling large amounts of text content. Ideal for lengthy messages, agreements, or detailed information. Includes a scrollable area for improved usability, along with dismiss and confirmation buttons.

Message Modal

A Dialog component tailored for sending messages. Includes input fields for username and message, providing a clean interface for direct communication. Perfect for chat or messaging functionalities.

Modal Notification

A focused example of a notification-style Dialog component. Designed to grab the user's attention, it combines an icon, concise messaging, and actionable buttons to deliver critical information or alerts effectively.

Required Script

The Modal component in david-ai requires JavaScript to handle the modal functionality. The library provides smooth transitions and toggle behavior through data attributes.

Installation

To use the Modal component in your project, you first need to install the david-ai library via npm:

Basic Usage

Using with Global Access

If you prefer, you can use the DavidAI global object instead of directly importing initModal:

Using with CDN

You can include david-ai via a CDN and initialize modal functionality globally in the browser. Add the following script to your HTML file:

HTML Code Example

TypeScript

David AI Modal component can be used programmatically with TypeScript support for more control and type safety:

Programmatic Usage with TypeScript

Learn how to use David AI's Modal component with TypeScript for dynamic dialog control. This component provides programmatic methods to show, hide and configure modal dialogs with full type safety and customization options.

HTML Structure

The HTML structure demonstrates an accessible and interactive modal component featuring:

  • A semantic button element for triggering the modal dialog
  • ARIA attributes and roles for screen reader support
  • Smooth transitions and animations for modal visibility
  • Dark and light theme compatibility with Tailwind CSS
  • Responsive modal dialog with flexible sizing
  • Structured header, body and footer sections
  • Proper z-index handling for overlay layering
  • Click outside detection for automatic closing
  • Keyboard support for ESC key dismissal

Here's the complete HTML implementation:

Props & Methods

The Modal component provides a way to display overlay dialogs with smooth animations and accessibility features. It supports keyboard interactions, outside click detection, and programmatic control through methods like show and hide.


InterfaceProperty/MethodTypeDescription
ModalConfigkeyboardboolean (optional)Whether to close the modal when pressing the Escape key. Default is true.
ModalConfigcloseOnOutsideClickboolean (optional)Whether to close the modal when clicking outside. Default is true.
IModalshow()voidShows/opens the modal programmatically.
IModalhide()voidHides/closes the modal programmatically.
IModalisVisiblebooleanReturns whether the modal is currently visible.
IModaldestroy()voidDestroys the modal instance and cleans up resources.