Sadrazam – Backdrop Showcase

Basic Show / Hide

Use Backdrop.insert() to show the backdrop and Backdrop.remove(ownerId) to hide it. The method returns an ownerId string used to remove that specific request.

Toggle Hidden

                // Show the backdrop

                const ownerId = Sadrazam.Backdrop.insert();

                // Hide it by ownerId

                Sadrazam.Backdrop.remove(ownerId);

Click to Close

Pass an onClick callback in the options object. When the user clicks the backdrop, the callback fires — typically used to close the overlay.

Open Hidden

                let id;

                id = Sadrazam.Backdrop.insert({

                  onClick: () => {

                    Sadrazam.Backdrop.remove(id);

                  }

                });

Custom z-index Variable

Override the CSS custom property used for z-index via the zIndexVar option. Default is --z-dropdown-backdrop. You can also pass stackLevel to set --z-modal-stack-level.

Dropdown z --z-dropdown-backdrop

Overlay z --z-overlay-backdrop

No active backdrops

                Sadrazam.Backdrop.insert({

                  zIndexVar: '--z-overlay-backdrop',

                  stackLevel: 2

                });

Stack Behavior

Backdrop maintains an internal stack. Each insert() pushes an owner; each remove() pops or filters it out. The backdrop stays visible until the stack is empty. The topmost owner's onClick is the one that fires on click.

Push

Stack: (empty)

Clicking the backdrop itself removes the topmost owner (via its onClick). Push multiple owners, then try clicking the backdrop repeatedly to watch the stack drain.

                // Push multiple owners onto the stack

                const id1 = Sadrazam.Backdrop.insert({ onClick: () => Sadrazam.Backdrop.remove(id1) });

                const id2 = Sadrazam.Backdrop.insert({ onClick: () => Sadrazam.Backdrop.remove(id2) });

                // Remove without ownerId pops the topmost entry

                Sadrazam.Backdrop.remove();

Custom Owner ID

You can supply your own ownerId to prevent duplicate entries. Calling insert() with the same ownerId will not create a second stack entry.

Fixed ID

                // Will not duplicate if called twice

                Sadrazam.Backdrop.insert({

                  ownerId: 'my-sidebar',

                  onClick: () => Sadrazam.Backdrop.remove('my-sidebar')

                });

                // Remove by the exact ownerId

                Sadrazam.Backdrop.remove('my-sidebar');

API Reference

The Backdrop module is a singleton (static class). All methods are called on Sadrazam.Backdrop directly.

insert() Shows or updates the backdrop. Returns an ownerId string.

Options ownerId · zIndexVar · stackLevel · onClick

remove() Removes an owner from the stack. Pass ownerId to target a specific entry, or omit it to pop the topmost one.

help() Prints available methods and descriptions to the browser console.

CSS Class The backdrop element uses .backdrop and toggles .is-visible for fade-in/out transitions (opacity 0.3s).

CSS Vars --backdrop-background · --backdrop-blur · --z-dropdown-backdrop · --z-overlay-backdrop