Class yii\bootstrap4\Modal

Inheritanceyii\bootstrap4\Modal » yii\bootstrap4\Widget » yii\base\Widget
Uses Traitsyii\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

Hide inherited 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

Hide inherited 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

Hide inherited 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

Hide inherited 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

Hide inherited properties

$bodyOptions public property

Body options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $bodyOptions = []
$centerVertical public property (available since version 2.0.9)

Whether to center the modal vertically

When true the modal-dialog-centered class will be added to the modal-dialog

public boolean $centerVertical false
$closeButton public property

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.

public array|false $closeButton = []
$dialogOptions public property (available since version 2.0.9)

Modal dialog options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $dialogOptions = []
$footer public property

The footer content in the modal window.

public string $footer null
$footerOptions public property

Additional footer options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $footerOptions = []
$headerOptions public property

Additional header options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $headerOptions = []
$scrollable public property (available since version 2.0.9)

Whether to make the modal body scrollable

When true the modal-dialog-scrollable class will be added to the modal-dialog

public boolean $scrollable false
$size public property

The modal size. Can be SIZE_LARGE or SIZE_SMALL, or empty for default.

public string $size null
$title public property

The tile content in the modal window.

public string $title null
$titleOptions public property

Additional title options

See also \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

public array $titleOptions = []
$toggleButton public property

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.

public array|false $toggleButton false

Method Details

Hide inherited methods

getView() public abstract method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::getView()

See also \yii\base\Widget::getView().

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();

            
init() public method

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";
}

            
initOptions() protected method

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']);
    }
}

            
registerClientEvents() protected method

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));
    }
}

            
registerPlugin() protected method

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();
}

            
renderBodyBegin() protected method

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);
}

            
renderBodyEnd() protected method

Renders the closing tag of the modal body.

protected string renderBodyEnd ( )
return string

The rendering result

                protected function renderBodyEnd()
{
    return Html::endTag('div');
}

            
renderCloseButton() protected method

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;
    }
}

            
renderFooter() protected method

Renders the HTML markup for the footer of the modal

protected string renderFooter ( )
return string

The rendering result

                protected function renderFooter()
{
    if ($this->footer !== null) {
        Html::addCssClass($this->footerOptions, ['widget' => 'modal-footer']);
        return Html::tag('div', "\n" . $this->footer . "\n", $this->footerOptions);
    } else {
        return null;
    }
}

            
renderHeader() protected method

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);
}

            
renderToggleButton() protected method

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;
    }
}

            
run() public method

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');
}