yii2使用modal弹窗-蒲公英云

yii2使用modal弹窗

视图中引用bootstrap扩展

use yii\bootstrap\Modal;
<?php 
AdminModal::begin([
    'id' => 'operate-modal',
    'header' => '<h4 class="modal-title"></h4>',
    'size'=>AdminModal::SIZE_DEFAULT,//设定弹窗宽度，可以自己写一个类继承与modal类，定义一个常量的class属性，然后引入该css样式
    'options'=>[
        'data-backdrop'=>'static',//点击空白处不关闭弹窗
        'data-keyboard'=>false,
    ],
]); 
AdminModal::end();
$this->title = '分类列表';
$this->params['breadcrumbs'][] = $this->title;
// 创建
$requestCreateUrl = Url::toRoute('create');
$requestUpdateUrl = Url::toRoute('update');
$js = <<<JS
// 创建操作
$('#create').on('click', function () { 
    $('.modal-title').html('创建栏目');
    $.get('{$requestCreateUrl}',
        function (data) { 
      // 弹窗的主题渲染页面
            $('.modal-body').html(data);
        }  
    );
});
$('.btn-update').on('click', function () { 
    $('.modal-title').html('栏目信息');
    $.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
        function (data) { 
            $('.modal-body').html(data);
        }  
    );
});
JS;
$this->registerJs($js);
?>

gridview中自定义按钮和弹出框修改创建数据

[
                'class' => 'yii\grid\ActionColumn',
                'template' => '{update} {delete}',
                'header' => '操作',
                'buttons' => [
                    'update' => function ($url, $model, $key) { 
                        return Html::a("修改分类", $url, [
                                'title' => '修改分类', 
                                // btn-update 目标class
                                'class' => 'btn btn-default btn-update',
                                // 固定写法
                                'data-toggle' => 'modal',
                                // 指向modal中begin设定的id
                                'data-target' => '#operate-modal',
                        ]); 
                    },
                    'delete' => function ($url, $model, $key) { 
                        return Html::a('删除', $url, [
                            'title' => '删除',
                            'class' => 'btn btn-default',
                            'data' => [
                                'confirm' => '确定要删除么?',
                                'method' => 'post',
                            ],
                        ]); 
                    },
                ],
            ],