Modal Component Test

Basic Modal

Test basic modal functionality with different close methods.

Basic Modal

This is a basic modal dialog. You can close it by:

  • Clicking the backdrop
  • Pressing the Escape key
  • Clicking the close button

Form Modal

Modal with form elements and proper focus management.

Contact Form

Modal Options

Test different modal configuration options.

No Backdrop Click

This modal cannot be closed by clicking the backdrop. You must use the close button or press Escape.

No Escape Key

This modal cannot be closed with the Escape key. You must click the backdrop or use the close button.

Invisible Backdrop

This modal has no visible backdrop, but you can still click outside to close it or press Escape.

Keep Mounted

This modal stays in the DOM even when closed, which can be useful for performance or maintaining state.

Nested Modals

Test modals that open other modals (stacking with different z-index values).

First Modal (z-index: 1400)

This is the first modal. You can open another modal on top of this one.

Second Modal (z-index: 1500)

This is the second modal, stacked on top of the first one.

Custom Styled Modals

Examples of modals with custom styling and content.

Custom Styled Modal

This modal has custom styling, disabled backdrop click, and higher z-index. You must use the close button or press Escape to close it.

Loading...

Please wait while we process your request.
Beautiful landscape

Beautiful landscape photo

Accessibility Features

Test accessibility features including focus management and keyboard navigation.

Programmatic API

Create and control modals programmatically using JavaScript.