Maslosoft

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
$autoOpen

Whether to automatically open the modal when initialized.
$backdrop

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

Buttons configuration to add to window footer.
$closeButton

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

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

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

Enabling dockable feature will automatically add Docker widget.
$draggable

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

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

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

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.
$jsRef

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');
$options

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.
$resizable

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

Set initial size of window, available options are:

  • medium
  • large
$title

Title of window.
$vm

View model for modal window
Documentation Made with Zamm , Gathered by Staple