Sadrazam – Modal Showcase

Modal Sizes

Set the size config to control modal width: 'sm' / 'md' / 'lg' / 'fullscreen'

Small modal__dialog--sm (470px)

Medium modal__dialog--md (650px)

Large modal__dialog--lg (950px)

Fullscreen modal__dialog--fullscreen

Sadrazam.Modal.insert({
  content: `
    <div class="modal__header">...</div>
    <div class="modal__body">...</div>
  `,
  size: 'md'  // 'sm' | 'md' | 'lg' | 'fullscreen'
});

Header, Body & Footer

Modals with .modal__header, .modal__body and optional .modal__footer

Header + Body modal__header + modal__body

With Footer modal__header + modal__body + modal__footer

Body Only modal__body only (minimal)

// Footer with action buttons (close button auto-generated by closeButton: true default)
Sadrazam.Modal.insert({
  size: 'md',
  content: `
    <div class="modal__header">
      <h1 class="modal__title">Title</h1>
    </div>
    <div class="modal__body">Content here</div>
    <div class="modal__footer">
      <button class="bttn--sm bttn--ghost" data-modal-close>Cancel</button>
      <button class="bttn--sm bttn--pri">Save</button>
    </div>
  `
});

Close Behaviours

Control how the modal closes: close button, outer click, any click or auto-timer

Close Button data-modal-close

Outer Click closeOnOuterClick: true

Any Click closeOnClick: true

Auto Close (3s) time: 3000

Sadrazam.Modal.insert({
  content: dialog,
  closeOnOuterClick: true,  // close when clicking backdrop
  closeOnClick: false,       // close on any click (overrides outer)
  time: 3000,                // auto-close after 3 seconds
});

Close Callback

Execute a function after the modal is closed using closeAfterFunction

Callback closeAfterFunction: () => { ... }

Sadrazam.Modal.insert({
  content: dialog,
  closeOnOuterClick: true,
  closeAfterFunction: () => {
    alert('Modal was closed!');
  }
});

Programmatic API

Store the instance and call .close() or use Modal.getInstance(element)?.close()

Instance .close() const m = Modal.insert({...}); m.close();

getInstance Modal.getInstance(element)?.close()

querySelector instance.querySelector('.my-input')

// Store the modal instance
const myModal = Sadrazam.Modal.insert({ content: dialog });

// Close programmatically after 2 seconds
setTimeout(() => myModal.close(), 2000);

// Query elements inside the modal
const input = myModal.querySelector('.my-input');

// Close from inside a modal (e.g. in onclick handler)
Sadrazam.Modal.getInstance(event.target)?.close();

Close Other Modals

Use closeOtherModals: true to close all existing modals before opening a new one

Stack Modals Opens two modals stacked

Replace Modal closeOtherModals: true

Sadrazam.Modal.insert({
  content: dialog,
  closeOtherModals: true  // closes all open modals first
});

Confirm Dialog Pattern

Build a confirmation dialog with footer actions and close callback

Confirm Confirm with Cancel / Delete buttons

Save Changes Confirm with Cancel / Save buttons

// Confirm dialog with footer actions
Sadrazam.Modal.insert({
  size: 'sm',
  closeOnOuterClick: true,
  content: `
    <div class="modal__header">
      <h1>Are you sure?</h1>
    </div>
    <div class="modal__body">This cannot be undone.</div>
    <div class="modal__footer">
      <button class="bttn--sm bttn--ghost" data-modal-close>Cancel</button>
      <button class="bttn--sm bttn--danger" onclick="onConfirm(this)">Delete</button>
    </div>
  `
});

Toast

Quick notification modals via Sadrazam.Toast.insert() with type-based icons: success, error, warning, notice

Success { success: "..." }

Error { error: "..." }

Warning { warning: "..." }

Notice { notice: "..." }

Multiple { error: ["msg1", "msg2"] }

Sadrazam.Toast.insert({
  message: { success: 'Operation completed successfully!' },
  time: 2700,              // auto-close in 2.7s (default: 27000ms)
  size: 'medium',           // 'small' | 'medium' | 'large'
  dismissButton: false,   // show dismiss button (default: false)
  closeOnClick: true,      // click anywhere to dismiss
});

// Multiple messages of same type
Sadrazam.Toast.insert({
  message: { error: ['Email is required', 'Password too short'] }
});

Toast Sizes

Control the Toast dialog width with the size option

Small size: 'small' (470px)

Medium size: 'medium' (650px, default)

Large size: 'large' (950px)

Static Methods Reference

All available static methods on Sadrazam.Modal and Sadrazam.Toast

Modal.insert() Modal.insert({ content, size, position, className, time, closeOnOuterClick, closeOnClick, closeAfterFunction, closeOtherModals })

Modal.getInstance() Modal.getInstance(element) -- returns the Modal instance that contains the given element

Modal.help() Logs config docs to console

Toast.insert() Toast.insert({ message, time, size, position, dismissButton, closeOnClick })

Toast.help() Logs config docs to console

// Instance methods (returned by Modal.insert)
const m = Sadrazam.Modal.insert({ content: dialog });

m.close();                        // close and clean up the modal
m.destroy();                      // alias for close() (industry convention)
m.querySelector('.my-el');         // find element inside modal
m.querySelectorAll('.items');     // find all matching elements

Configuration Reference

All options accepted by Modal.insert(options)

content HTML string or DOM Element. Auto-wrapped with .modal__dialog + .modal__content. Required.

size Dialog width: 'sm' (470px), 'md' (650px), 'lg' (950px), 'fullscreen'. Default: 'md'

position Vertical alignment: 'top', 'center', 'bottom'. Default: 'center'

className Extra CSS class added to .modal__dialog. Default: ''

time Auto-close delay in ms. false to disable. Default: false

closeOnOuterClick Close when clicking backdrop / outside modal content. Default: false

closeOnClick Close on any click (inside or outside). Default: false

closeAfterFunction Callback invoked after the modal closes. Default: null

closeOtherModals Close all other open modals before opening this one. Default: false