Class yii\bootstrap4\Modal
Inheritance | yii\bootstrap4\Modal » yii\bootstrap4\Widget » yii\base\Widget |
---|---|
Uses Traits | yii\bootstrap4\BootstrapWidgetTrait |
Source Code | https://github.com/yiisoft/yii2-bootstrap4/blob/master/src/Modal.php |
Modal renders a modal window that can be toggled by clicking on a button.
The following example will show the content enclosed between the begin() and end() calls within the modal window:
Modal::begin([
'title' => 'Hello world',
'toggleButton' => ['label' => 'click me'],
]);
echo 'Say hello...';
Modal::end();
See also https://getbootstrap.com/docs/4.5/components/modal/.
Public Properties
Property | Type | Description | Defined By |
---|---|---|---|
$bodyOptions | array | Body options | yii\bootstrap4\Modal |
$centerVertical | boolean | Whether to center the modal vertically When true the modal-dialog-centered class will be added to the modal-dialog | yii\bootstrap4\Modal |
$clientEvents | array | The event handlers for the underlying Bootstrap JS plugin. | yii\bootstrap4\BootstrapWidgetTrait |
$clientOptions | array | The options for the underlying Bootstrap JS plugin. | yii\bootstrap4\BootstrapWidgetTrait |
$closeButton | array|false | The options for rendering the close button tag. | yii\bootstrap4\Modal |
$dialogOptions | array | Modal dialog options | yii\bootstrap4\Modal |
$footer | string | The footer content in the modal window. | yii\bootstrap4\Modal |
$footerOptions | array | Additional footer options | yii\bootstrap4\Modal |
$headerOptions | array | Additional header options | yii\bootstrap4\Modal |
$options | array | The HTML attributes for the widget container tag. | yii\bootstrap4\Widget |
$scrollable | boolean | Whether to make the modal body scrollable When true the modal-dialog-scrollable class will be added to the modal-dialog | yii\bootstrap4\Modal |
$size | string | The modal size. | yii\bootstrap4\Modal |
$title | string | The tile content in the modal window. | yii\bootstrap4\Modal |
$titleOptions | array | Additional title options | yii\bootstrap4\Modal |
$toggleButton | array|false | The options for rendering the toggle button tag. | yii\bootstrap4\Modal |
Public Methods
Method | Description | Defined By |
---|---|---|
getView() | yii\bootstrap4\BootstrapWidgetTrait | |
init() | Initializes the widget. | yii\bootstrap4\Modal |
run() | Renders the widget. | yii\bootstrap4\Modal |
Protected Methods
Method | Description | Defined By |
---|---|---|
initOptions() | Initializes the widget options. | yii\bootstrap4\Modal |
registerClientEvents() | Registers JS event handlers that are listed in $clientEvents. | yii\bootstrap4\BootstrapWidgetTrait |
registerPlugin() | Registers a specific Bootstrap plugin and the related events | yii\bootstrap4\BootstrapWidgetTrait |
renderBodyBegin() | Renders the opening tag of the modal body. | yii\bootstrap4\Modal |
renderBodyEnd() | Renders the closing tag of the modal body. | yii\bootstrap4\Modal |
renderCloseButton() | Renders the close button. | yii\bootstrap4\Modal |
renderFooter() | Renders the HTML markup for the footer of the modal | yii\bootstrap4\Modal |
renderHeader() | Renders the header HTML markup of the modal | yii\bootstrap4\Modal |
renderToggleButton() | Renders the toggle button. | yii\bootstrap4\Modal |
Constants
Constant | Value | Description | Defined By |
---|---|---|---|
SIZE_DEFAULT | '' | The additional css class of default modal | yii\bootstrap4\Modal |
SIZE_EXTRA_LARGE | 'modal-xl' | The additional css class of extra large modal | yii\bootstrap4\Modal |
SIZE_LARGE | 'modal-lg' | The additional css class of large modal | yii\bootstrap4\Modal |
SIZE_SMALL | 'modal-sm' | The additional css class of small modal | yii\bootstrap4\Modal |
Property Details
Body options
See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
Whether to center the modal vertically
When true the modal-dialog-centered class will be added to the modal-dialog
The options for rendering the close button tag. The close button is displayed in the header of the modal window. Clicking on the button will hide the modal window. If this is false, no close button will be rendered.
The following special options are supported:
- tag: string, the tag name of the button. Defaults to 'button'.
- label: string, the label of the button. Defaults to '×'.
The rest of the options will be rendered as the HTML attributes of the button tag. Please refer to the Modal plugin help for the supported HTML attributes.
Modal dialog options
See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
Additional header options
See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
Whether to make the modal body scrollable
When true the modal-dialog-scrollable class will be added to the modal-dialog
The modal size. Can be SIZE_LARGE or SIZE_SMALL, or empty for default.
Additional title options
See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
The options for rendering the toggle button tag. The toggle button is used to toggle the visibility of the modal window. If this property is false, no toggle button will be rendered.
The following special options are supported:
- tag: string, the tag name of the button. Defaults to 'button'.
- label: string, the label of the button. Defaults to 'Show'.
The rest of the options will be rendered as the HTML attributes of the button tag. Please refer to the Modal plugin help for the supported HTML attributes.
Method Details
public abstract \yii\web\View getView ( ) | ||
return | \yii\web\View |
The view object that can be used to render views or view files. |
---|
abstract function getView();
Initializes the widget.
public void init ( ) |
public function init()
{
parent::init();
$this->initOptions();
echo $this->renderToggleButton() . "\n";
echo Html::beginTag('div', $this->options) . "\n";
echo Html::beginTag('div', $this->dialogOptions) . "\n";
echo Html::beginTag('div', ['class' => 'modal-content']) . "\n";
echo $this->renderHeader() . "\n";
echo $this->renderBodyBegin() . "\n";
}
Initializes the widget options.
This method sets the default values for various options.
protected void initOptions ( ) |
protected function initOptions()
{
$this->options = array_merge([
'class' => 'fade',
'role' => 'dialog',
'tabindex' => -1,
'aria-hidden' => 'true'
], $this->options);
Html::addCssClass($this->options, ['widget' => 'modal']);
if ($this->clientOptions !== false) {
$this->clientOptions = array_merge(['show' => false], $this->clientOptions);
}
$this->titleOptions = array_merge([
'id' => $this->options['id'] . '-label'
], $this->titleOptions);
if (!isset($this->options['aria-label'], $this->options['aria-labelledby']) && $this->title !== null) {
$this->options['aria-labelledby'] = $this->titleOptions['id'];
}
if ($this->closeButton !== false) {
$this->closeButton = array_merge([
'data-dismiss' => 'modal',
'class' => 'close',
'type' => 'button',
], $this->closeButton);
}
if ($this->toggleButton !== false) {
$this->toggleButton = array_merge([
'data-toggle' => 'modal',
'type' => 'button'
], $this->toggleButton);
if (!isset($this->toggleButton['data-target']) && !isset($this->toggleButton['href'])) {
$this->toggleButton['data-target'] = '#' . $this->options['id'];
}
}
$this->dialogOptions = array_merge([
'role' => 'document'
], $this->dialogOptions);
Html::addCssClass($this->dialogOptions, ['widget' => 'modal-dialog']);
if ($this->size) {
Html::addCssClass($this->dialogOptions, ['size' => $this->size]);
}
if ($this->centerVertical) {
Html::addCssClass($this->dialogOptions, ['align' => 'modal-dialog-centered']);
}
if ($this->scrollable) {
Html::addCssClass($this->dialogOptions, ['scroll' => 'modal-dialog-scrollable']);
}
}
Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerClientEvents()
Registers JS event handlers that are listed in $clientEvents.
protected void registerClientEvents ( ) |
protected function registerClientEvents()
{
if (!empty($this->clientEvents)) {
$id = $this->options['id'];
$js = [];
foreach ($this->clientEvents as $event => $handler) {
$js[] = "jQuery('#$id').on('$event', $handler);";
}
$this->getView()->registerJs(implode("\n", $js));
}
}
Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerPlugin()
Registers a specific Bootstrap plugin and the related events
protected void registerPlugin ( $name ) | ||
$name | string |
The name of the Bootstrap plugin |
protected function registerPlugin($name)
{
$view = $this->getView();
BootstrapPluginAsset::register($view);
$id = $this->options['id'];
if ($this->clientOptions !== false) {
$options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
$js = "jQuery('#$id').$name($options);";
$view->registerJs($js);
}
$this->registerClientEvents();
}
Renders the opening tag of the modal body.
protected string renderBodyBegin ( ) | ||
return | string |
The rendering result |
---|
protected function renderBodyBegin()
{
Html::addCssClass($this->bodyOptions, ['widget' => 'modal-body']);
return Html::beginTag('div', $this->bodyOptions);
}
Renders the closing tag of the modal body.
protected string renderBodyEnd ( ) | ||
return | string |
The rendering result |
---|
protected function renderBodyEnd()
{
return Html::endTag('div');
}
Renders the close button.
protected string renderCloseButton ( ) | ||
return | string |
The rendering result |
---|
protected function renderCloseButton()
{
if (($closeButton = $this->closeButton) !== false) {
$tag = ArrayHelper::remove($closeButton, 'tag', 'button');
$label = ArrayHelper::remove($closeButton, 'label', Html::tag('span', '×', [
'aria-hidden' => 'true'
]));
return Html::tag($tag, $label, $closeButton);
} else {
return null;
}
}
Renders the header HTML markup of the modal
protected string renderHeader ( ) | ||
return | string |
The rendering result |
---|
protected function renderHeader()
{
$button = $this->renderCloseButton();
if ($this->title !== null) {
Html::addCssClass($this->titleOptions, ['widget' => 'modal-title']);
$header = Html::tag('h5', $this->title, $this->titleOptions);
} else {
$header = '';
}
if ($button !== null) {
$header .= "\n" . $button;
} elseif ($header === '') {
return '';
}
Html::addCssClass($this->headerOptions, ['widget' => 'modal-header']);
return Html::tag('div', "\n" . $header . "\n", $this->headerOptions);
}
Renders the toggle button.
protected string renderToggleButton ( ) | ||
return | string |
The rendering result |
---|
protected function renderToggleButton()
{
if (($toggleButton = $this->toggleButton) !== false) {
$tag = ArrayHelper::remove($toggleButton, 'tag', 'button');
$label = ArrayHelper::remove($toggleButton, 'label', 'Show');
return Html::tag($tag, $label, $toggleButton);
} else {
return null;
}
}
Renders the widget.
public void run ( ) |
public function run()
{
echo "\n" . $this->renderBodyEnd();
echo "\n" . $this->renderFooter();
echo "\n" . Html::endTag('div'); // modal-content
echo "\n" . Html::endTag('div'); // modal-dialog
echo "\n" . Html::endTag('div');
$this->registerPlugin('modal');
}