Arx Modals — Documentation

Installation

Link the CSS in <head>, jQuery, and the plugin just before </body>. The plugin auto-binds [data-modal] triggers on page load. arx.css is optional — the modal styles are self-contained.

HTML

<!-- Optional base framework -->
<link rel="stylesheet" href="path/to/arx.css">

<!-- Modals — always required -->
<link rel="stylesheet" href="css/modals.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/modals.js"></script>

Basic Usage

Define a hidden modal template in your HTML, then trigger it with data-modal on any clickable element.

HTML

<!-- trigger -->
<button data-modal="#my-modal">Open Modal</button>

<!-- template (hidden) -->
<div class="arx-modal-template" id="my-modal" style="display:none;">
    <div class="arx-modal-header">
        <h3>Modal Title</h3>
    </div>
    <div class="arx-modal-body">
        <p>Content goes here.</p>
    </div>
    <div class="arx-modal-footer">
        <button class="arx-modal-btn arx-modal-btn-primary" data-modal-close>Close</button>
    </div>
</div>

No JavaScript required — data-modal triggers and data-modal-close buttons are auto-bound when the plugin loads.

Confirm Dialogs

Build confirm dialogs with Cancel/Confirm buttons. Use the .arx-modal-btn-danger class for destructive actions.

HTML

<button class="arx-modal-btn" data-modal-close>Cancel</button>
<button class="arx-modal-btn arx-modal-btn-danger" data-modal-close>Delete</button>

Pair with callbacks to run logic after confirmation:

JavaScript

$('#btn-confirm-delete').on('click', function () {
    // runs when user clicks Delete
    performDelete();
});

Form Modals

Modals support any content, including form elements. Use .arx-input and .arx-label from the Framework, or your own styles.

HTML

<div class="arx-modal-body">
    <label class="arx-label">Name</label>
    <input type="text" class="arx-input">
</div>
<div class="arx-modal-footer">
    <button class="arx-modal-btn" data-modal-close>Cancel</button>
    <button class="arx-modal-btn arx-modal-btn-primary">Save</button>
</div>

Sizes

Add .arx-modal-sm or .arx-modal-lg to the template container for different widths. Default (no class) is medium.

Class	Width	Use for
`.arx-modal-sm`	360px	Alerts, simple confirmations
(none)	520px	Standard dialogs, forms
`.arx-modal-lg`	720px	Terms, policies, multi-section content

HTML

<div class="arx-modal-template arx-modal-sm" id="alert" style="display:none;">
    ...</div>

<div class="arx-modal-template arx-modal-lg" id="terms" style="display:none;">
    ...</div>

Keyboard Shortcuts

When a modal is open:

Key	Action
`Escape`	Close the modal

Programmatic API

Control modals from JavaScript via the ArxModals global object or the jQuery plugin method.

JavaScript

// Open a modal by selector
ArxModals.open('#my-modal');

// Open with options
ArxModals.open('#my-modal', {
    animationSpeed: 150,
    onOpen: function () {
        console.log('modal opened');
    }
});

// Close the current modal
ArxModals.close();

// Check if a modal is currently open
ArxModals.isOpen();  // true / false

// jQuery plugin method
$().modal('close');
$().modal('isOpen');

Chaining

Opening a new modal while one is already open instantly replaces it. Use data-modal buttons inside modal templates, or call ArxModals.open() to chain. The current modal closes immediately and the new one fades in.

HTML

<!-- Step 1 -->
<div class="arx-modal-template arx-modal-sm" id="step-1" style="display:none;">
    <div class="arx-modal-footer">
        <button class="arx-modal-btn arx-modal-btn-primary" data-modal="#step-2">Next</button>
    </div>
</div>

<!-- Step 2 -->
<div class="arx-modal-template arx-modal-sm" id="step-2" style="display:none;">
    <div class="arx-modal-footer">
        <button class="arx-modal-btn arx-modal-btn-primary" data-modal-close>Finish</button>
    </div>
</div>

JavaScript

// Start the chain
ArxModals.open('#step-1');

// Chain programmatically
ArxModals.open('#step-2');  // closes step-1, opens step-2

Callbacks

Pass onOpen and onClose callbacks when opening a modal programmatically.

JavaScript

ArxModals.open('#my-modal', {
    onOpen: function () {
        // this = the template DOM element
        console.log('opened');
    },
    onClose: function () {
        console.log('closed');
    }
});

Options

Pass an object to ArxModals.open(selector, options) to configure behaviour.

Option	Type	Default	Description
`closeOnEsc`	`boolean`	`true`	Close on Escape key press.
`closeOnClick`	`boolean`	`true`	Close when clicking the backdrop overlay.
`animationSpeed`	`number`	`250`	Overlay fade-in/out duration (ms).
`zIndex`	`number`	`9990`	CSS z-index of the overlay.
`onOpen`	`function`	`null`	Callback when the modal opens.
`onClose`	`function`	`null`	Callback when the modal closes.

Methods

Access via ArxModals.* or $().modal('method').

Method	Global	jQuery	Description
`open`	`ArxModals.open(sel)`	—	Opens a modal by selector.
`close`	`ArxModals.close()`	`$().modal('close')`	Closes the current modal.
`isOpen`	`ArxModals.isOpen()`	`$().modal('isOpen')`	Returns `true` if a modal is open.

Same methods via window.ArxModals: ArxModals.close(), ArxModals.isOpen().

Styling

All modal elements use CSS classes prefixed with .arx-modal-. Override them after importing modals.css.

Class	Element	Purpose
`.arx-modal-overlay`	`div`	Full-screen backdrop (fixed)
`.arx-modal-container`	`div`	Centering flex wrapper
`.arx-modal-window`	`div`	The visible modal box
`.arx-modal-window.arx-modal-sm`	`div`	Narrow variant (360px)
`.arx-modal-window.arx-modal-lg`	`div`	Wide variant (720px)
`.arx-modal-close`	`button`	Close button (top-right)
`.arx-modal-header`	`div`	Title area above the body
`.arx-modal-body`	`div`	Main content area
`.arx-modal-footer`	`div`	Button area below the body
`.arx-modal-btn`	`button`	Base button style for footer actions
`.arx-modal-btn-primary`	`button`	Primary/confirm action button
`.arx-modal-btn-danger`	`button`	Destructive action button

Download

Download individual plugin files or grab the full package as a ZIP from the Library page.

File	Description
`css/modals.css`	Modal overlay, window, header, body, footer, and button styles	Download
`js/modals.js`	jQuery plugin — all modal logic, data-binding, and API	Download