Arx Modals

Home
Examples
Documentation

Arx Modals

A lightweight jQuery modal/dialog plugin with overlay, Escape-to-close, click-outside-to-close, fade animation, and zero-JS triggering via data-modal.

jQuery Modal Zero-JS

Basic

Confirm Dialog

Form Modal

Sizes

Prompt

Loading / Processing

Status Messages

Behaviour Options

Callbacks

Chained Modals

Programmatic Control

State: false

Basic Modal

This is a basic modal dialog. Click the backdrop, the close button, or press Escape to dismiss it.

The overlay fades in smoothly and the window slides down with a subtle scale animation.

Confirm Delete

Are you sure you want to delete this item? This action cannot be undone.

Create Project

Project Name

Description

Alert

This is a compact small modal — great for simple alerts, notifications, or quick confirmations.

Terms of Service

This is a large modal — ideal for longer content like terms, policies, detailed forms, or multi-section dialogs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rename File

Enter a new name for report-v2.pdf

Processing, please wait...

✓

Success

The operation completed successfully.

✗

Error

Something went wrong. Please try again.

Warning

Unsaved changes will be lost.

Important Action

This modal will not close when you click outside it. You must use the buttons below or press Escape to dismiss it.

Step 1 of 3

This is the first step in a chained sequence. Clicking "Next" instantly replaces this modal with step 2.

Step 2 of 3

Halfway there. Click "Next" to jump straight to the final step.

✓

All Done

You completed the 3-step chain.