Этот виджет позволяет легко подключить ajax загрузку контента внутрь всплывающих окон Bootstrap 3 Dialog.
$ composer require understeam/yii2-ajax-dialog:~0.1 --prefer-dist
Первое, что требуется сделать - это view, который будет загружаться внутрь окна. Здесь ничего особенного.
Создается view файл, который рендерится из контроллера по запросу, например ['popup/show']
.
<?php
namespace app\controllers;
use yii\web\Controller;
class PopupController extends Controller
{
public function actionShow()
{
return $this->render('show');
}
}
Внутри view необходимо обернуть отображаемую часть в виджет DialogContainer
:
<?php
$this->title = "Popup title!";
\understeam\dialog\DialogContainer::begin();
?>
<h1>Hello! This is popup</h1>
<?php
\understeam\dialog\DialogContainer::end();
?>
Через $this->title
можно задать заголовок всплывающего окна.
Так как для загрузки используется Pjax
, встроенный в Yii2, все ассеты, подключаемые внутри этого view
будут подключены на страницу, в которой будет отображён попап. Это позволяет безопасно использовать,
например, ActiveForm
с клиентской и ajax валидацией.
Чтобы вставить модальное окно на страницу, можно использовать следующий код:
<?=\understeam\dialog\Dialog::widget([
'url' => ['popup/show'], // URL содержимого
'open' => true, // Открыть окно при загрузке
]) ?>
Этот пример откроет модальное сразу при загрузке страницы. Чтобы этого избежать, можно назначить селектор или вызвать открытие окна из js кода.
<?=\understeam\dialog\Dialog::widget([
'url' => ['popup/show'], // URL содержимого
'jsName' => 'myPopup', // Имя js переменной, в которую будет сохранён объект модального окна
// Для вызова окна достаточно выполнить window.myPopup.open()
'selector' => 'a.showPopup', // Селектор, при клике на который будет совершено открытие окна
]) ?>
Кнопки в модальное окно добавляются через свойство buttons
:
<?=\understeam\dialog\Dialog::widget([
'url' => ['popup/show'], // URL содержимого
'buttons' => [
\understeam\dialog\CloseButton::className(), // Кнопка "закрыть"
[
'class' => \understeam\dialog\Button::className(),
'id' => 'btn-custom',
'label' => 'Custom',
'action' => 'function(){alert("custom button")}',
'cssClass' => ['btn-warning'],
'icon' => 'glyphicon glyphicon-ok',
],
]
]) ?>
Вы можете создавать свои кнопки, см. пример.
Для отображение в окне ActiveForm
с предопределёнными кнопками Submit
и Close
можно использовать
виджет ActiveFormDialog
.
<?=\understeam\dialog\ActiveFormDialog::widget([
'url' => ['popup/show'],
'jsName' => 'myPopup',
]) ?>
View при этом модифицировать не нужно
При отображении окна через JS имеется возможность передать в него динамические данные:
function openPopup(name, phone) {
myPopup.setData('options', {name: name, phone: phone});
myPopup.open();
}
При этом подстановка данных произойдёт в поля ввода текста с data аттрибутом data-dialog-attr
:
<input type="text" value="" name="name" data-dialog-attr="name" />
<input type="text" value="" name="phone" data-dialog-attr="phone" />
Или при выводе ActiveForm:
<?php
/**
* @var \yii\base\Model $model
*/
?>
<?php \understeam\dialog\DialogContainer::begin() ?>
<?php $form = \yii\bootstrap\ActiveForm::begin() ?>
<?= $form->field($model, 'name')->textInput([
'data-dialog-attr' => 'name',
]); ?>
<?= $form->field($model, 'phone')->textInput([
'data-dialog-attr' => 'phone',
]); ?>
<?php $form->end() ?>
<?php \understeam\dialog\DialogContainer::end() ?>
- Валидация ActiveForm
- Больше настроек для BootstrapDialog