stable css 1.2.1 · js 1.0.0

Modal

A centered dialog with a blurred backdrop, focus trap and return-focus. Open it from any element with data-ng-modal-open — no manual init.

A modal is a ng-modal root holding a ng-modal-panel (header / body / footer). It is hidden until a trigger opens it; the script handles focus, Esc, backdrop click and ARIA roles. Remember to link ng_modal.js.

Basic

A trigger points to the modal id with data-ng-modal-open="#id". Inside, data-ng-modal-close / -cancel / -confirm wire the actions.

modal.html

<button class="ng-btn ng-btn-primary" data-ng-modal-open="#demo-basic">Open modal</button>

<div class="ng-modal" id="demo-basic">
    <div class="ng-modal-panel">
        <header class="ng-modal-header">
            <h3>Confirm action</h3>
            <button class="ng-btn ng-btn-mute-ghost circle" data-ng-modal-close aria-label="Close"><i class="ph ph-x"></i></button>
        </header>
        <div class="ng-modal-body">
            <p>A centered dialog with a blurred backdrop and a focus trap. Press Esc or click outside to dismiss.</p>
        </div>
        <footer class="ng-modal-footer">
            <button class="ng-btn ng-btn-mute-soft" data-ng-modal-cancel>Cancel</button>
            <button class="ng-btn ng-btn-primary" data-ng-modal-confirm>Confirm</button>
        </footer>
    </div>
</div>

Colored header

Brand the header band with a color token via ng-modal-<color> on the root.

modal.html

<button class="ng-btn ng-btn-success" data-ng-modal-open="#demo-colored">Open success modal</button>

<div class="ng-modal ng-modal-success" id="demo-colored">
    <div class="ng-modal-panel">
        <header class="ng-modal-header">
            <h3>Saved</h3>
            <button class="ng-btn ng-btn-mute-ghost circle" data-ng-modal-close aria-label="Close"><i class="ph ph-x"></i></button>
        </header>
        <div class="ng-modal-body">
            <p>Add <code>ng-modal-&lt;color&gt;</code> on the root to brand the header band.</p>
        </div>
        <footer class="ng-modal-footer">
            <button class="ng-btn ng-btn-success" data-ng-modal-close>Done</button>
        </footer>
    </div>
</div>

Anatomy

The structure is fixed; every part is optional except the panel.

ng-modal ng-modal-panel ng-modal-header ng-modal-body ng-modal-footer ng-modal-close ng-modal-{color}

Trigger & action attributes

data-ng-modal-open="#id" data-ng-modal-close data-ng-modal-cancel data-ng-modal-confirm data-ng-modal-title

Events

Dispatched on the modal root — listen to drive your own logic.

ng:modal:open ng:modal:close ng:modal:confirm ng:modal:cancel

Reference

Generated from the component source (_ng_modal.scss · ng_modal.js).

Component info

Name	`modal`
Type	`css+js`
Version	`css 1.2.1 · js 1.0.0`
Status	`stable`
CSS	`/assets/css/components/_ng_modal.scss`
JS	`/assets/js/ng_modal.js`

Classes

.ng-alert .ng-card .ng-left .ng-modal .ng-modal- .ng-modal-body .ng-modal-close .ng-modal-footer .ng-modal-header .ng-modal-panel .ng-right

Tokens

--ng-modal-backdrop-blur --ng-modal-background --ng-modal-body-margin --ng-modal-footer-border-top --ng-modal-gap --ng-modal-header-border-bottom --ng-modal-height --ng-modal-hf-pad-x --ng-modal-hf-pad-y --ng-modal-max-width --ng-modal-padding-body --ng-modal-padding-header-footer --ng-modal-width --ng-modal-z

Events

ng:modal:cancel ng:modal:close ng:modal:confirm ng:modal:open