README

此小部件允许轻松将ajax加载的内容连接到Bootstrap 3 Dialog的弹出窗口中。Bootstrap 3 Dialog.

安装

$ composer require understeam/yii2-ajax-dialog:~0.1 --prefer-dist

控制器和视图

首先需要创建一个视图，该视图将被加载到窗口内部。这里没有什么特别的。创建一个由控制器根据请求渲染的视图文件，例如 ['popup/show']。

<?php

namespace app\controllers;

use yii\web\Controller;

class PopupController extends Controller
{

    public function actionShow()
    {
        return $this->render('show');
    }

}

在视图内部，需要将显示的部分包装在 DialogContainer 小部件中

<?php
$this->title = "Popup title!";
\understeam\dialog\DialogContainer::begin();
?>
<h1>Hello! This is popup</h1>
<?php
\understeam\dialog\DialogContainer::end();
?>

可以通过 $this->title 设置弹出窗口的标题。

由于使用了Yii2内建的 Pjax，因此在此视图内部连接的所有资产都将连接到显示弹出窗口的页面。这允许安全地使用例如 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 的 ActiveForm，可以使用小部件 ActiveFormDialog。

<?=\understeam\dialog\ActiveFormDialog::widget([
    'url' => ['popup/show'],
    'jsName' => 'myPopup',
]) ?>

在这种情况下不需要修改视图

传递的变量

通过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配置选项

understeam / yii2-ajax-dialog

维护者

详细信息