yii2使用modal弹窗

今天药忘吃喽~ 2022-07-14 11:26 259阅读 0赞

视图中引用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',
                                ],
                            ]); 
                        },
                    ],
                ],

弹窗请求的url地址要返回ajax表单