Maslosoft Framework Logo Maslosoft Framework Documentation
Flexible Application Foundation

Modal Window

Modal window with default configuration. Some basic options are set for demonstration purposes. All options are optional. By default window can be dragged by it's title.

echo $modal = Modal::widget([
	'id' => 'modal-1',
	'title' => 'My modal',
	'content' => 'Some content'

Click to open

Modal Window with Tabs

Modal windows can contain other widgets. Here we have put tabs into modal window.

echo $modal2 = Modal::widget([
	'id' => 'modal-2',
	'title' => 'My modal with tabs',
	'content' => Tabs::widget([
		'items' => [
				'title' => 'Tab 1',
				'content' => 'Some tab content'
				'title' => 'Tab 2',
				'content' => 'Some other tab content'

Click to open

Resizable Modal Window

Modal windows can be resizable using jQuery Ui resizable. This one has backdrop enabled.

echo $modal3 = Modal::widget([
	'id' => 'modal-3',
	'resizable' => true,
	'title' => 'My resizable modal',
	'content' => 'Some text',
	'backdrop' => true

Click to open

All modal options

Property Documentation

Whether to automatically open the modal when initialized.


Whether to cover user interface with semi-transparent block element.

Not really recommended, as it is better to create non-blocking UI for better experience.


Buttons configuration to add to window footer.


Whether to show close button. This option refers to close button in window footer, not the x mark on header, which is always available.


Content of window. Can also be widget instance, in which case it will be ran.


Set dockable property to true, to allow window to be docked into screen side.

Enabling dockable feature will automatically add Docker widget.


Allow dragging of window. This will also enable automatic windows stacking.


JavaScript event handlers with key being event name, and value - event handler. It is highly recommended to use ModalEvents class constants.


Array of HTML attributes which will be added to top HTML wrapping element of window. This might be used for some special purposes, however it is not recommended to use this option unless really needed.


Id of widget.

This might be used by widget in HTML, but no assumptions should be taken for that matter. ID's are in many cases generated automatically and it's value might change between page loads.


Js widget instance. This is JavaScript reference to current widget client side implementation.

This allows to invoke JavaScript methods, or set object properties with PHP. This will not encode value automatically, allowing to set JavaScript reference as a method parameter or property value.

Example of invoking method:

$widget->jsRef->setName(JavaScript::encode('Some name'));

Example of setting property:

$widget->jsRef->name = JavaScript::encode('Some name');

The options for the Bootstrap JavaScript plugin.

NOTE: These option will be overridden by other configuration options, like:

  • autoOpen
  • backdrop

Also the keyboard option is always set to true.

Setting this options is not really recommended.


Allow resizing window. Window size will be restored between subsequent opening, even between page reloads or browser restarts using local storage.


Set initial size of window, available options are:

  • medium
  • large

Title of window.


View model for modal window