Window

Non-modal windows and modal dialogs. Non-modal windows (default) are draggable and stack with z-index management. Modal windows show an overlay and block page interaction.

Non-Modal Window (Default)

Non-modal windows are draggable by default, have no overlay, and re-order to front when clicked.

Modal Window

Modal windows show an overlay, block interaction with the page, and are not draggable.

Draggable Modal (Override)

You can explicitly make a modal draggable with ->draggable().

Content via JavaScript

Open a window to see output...

// PHP: Non-modal window (default - draggable, no overlay)
<?= $m->window('myWin', 'Window Title')
    ->content('<p>Content here</p>')
    ->width('500px') ?>

// Modal window (overlay, blocks interaction, not draggable)
<?= $m->window('myModal', 'Modal Title')
    ->content('<p>Modal content</p>')
    ->modal()
    ->width('500px')
    ->addButton('OK', 'close', 'primary')
    ->addButton('Cancel', 'close', 'secondary') ?>

// Draggable modal (override default)
<?= $m->window('dragModal', 'Draggable Modal')
    ->content('<p>Drag me!</p>')
    ->modal()
    ->draggable()
    ->width('400px') ?>

// Visible on load
<?= $m->window('visible', 'Welcome')
    ->content('<p>Hello!</p>')
    ->visible() ?>

// Non-draggable non-modal window
<?= $m->window('static', 'Static Window')
    ->content('<p>Cannot drag</p>')
    ->draggable(false) ?>

// Open/close a window
var win = m.window('myWin');
win.open();
win.close();
win.toggle();

// Update content
win.setTitle('New Title');
win.setContent('<p>Updated</p>');

// Load content from URL
win.loadContent('/api/details')
    .then(function() { console.log('Loaded'); });

// Listen for events
document.getElementById('myWin')
    .addEventListener('m:window:open', function() {
        console.log('Window opened');
    });
document.getElementById('myWin')
    .addEventListener('m:window:close', function() {
        console.log('Window closed');
    });
document.getElementById('myWin')
    .addEventListener('m:window:action', function(e) {
        console.log('Button action:', e.detail);
    });

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->window($id, $title)`	`string, string`	Create a window component (non-modal by default).
`->title($title)`	`string`	Set the window title.
`->content($html)`	`string`	Set body HTML content.
`->modal($isModal)`	`bool`	Make window modal with overlay (default: `false`). Modals block interaction and are not draggable unless `->draggable()` is called.
`->draggable($drag)`	`bool`	Allow dragging by title bar. Default: `true` for non-modal windows, `false` for modals.
`->resizable($resize)`	`bool`	Allow window resizing.
`->scrollable($scroll)`	`bool`	Enable content area scrolling (default: `true`).
`->width($w)`	`string`	Window width (CSS value, e.g. `500px`).
`->height($h)`	`string`	Window height.
`->minWidth($w)`	`string`	Minimum width.
`->minHeight($h)`	`string`	Minimum height.
`->addButton($text, $action, $style)`	`string, string, string`	Add a footer button. Style: `primary`, `secondary`, `danger`.
`->visible($vis)`	`bool`	Show the window on page load.

JS JS Methods

Method / Property	Parameters	Description
`m.window(id, opts)`	`string, ?object`	Get or create Window instance.
`open()`		Show the window.
`close()`		Hide the window.
`toggle()`		Toggle visibility.
`setTitle(html)`	`string`	Update the title bar.
`setContent(html)`	`string`	Replace body content.
`loadContent(url, fetchOpts)`	`string, ?object`	Fetch HTML from a URL and set as content (returns Promise).

EVENT Events

Event Name	Detail	Description
`m:window:open`		Fired when the window opens.
`m:window:close`		Fired when the window closes.
`m:window:action`	`{action}`	Fired when a footer button is clicked.
`m:window:content-loaded`	`{url}`	Fired after `loadContent()` completes.