Gridview yii2中网格视图中的模式弹出窗口

Gridview yii2中网格视图中的模式弹出窗口,gridview,yii2,Gridview,Yii2,我想在点击网格视图中的按钮时弹出一个模式。Yi2 gridview是否可以实现这一点 <?= GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], 't

我想在点击网格视图中的按钮时弹出一个模式。Yi2 gridview是否可以实现这一点

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],


            'time_zone',
            'no_of_users',
            'bill_name',
            'bill_address',
            'names.name',
            'bill_state',
            'bill_city',
            'bill_postal',
            'bill_mobile',

            ['header'=>'Plan Info',
            'value'=> function($data)
                    { 
                        //~ print_r($data);die();
                        return  Html::a(Yii::t('app', ' {modelClass}', [
                            'modelClass' => 'details',
                        ]), ['userdetails/plans','id'=>$data->id], ['class' => 'btn btn-success    ']

                        );      
                    },
            'format' => 'raw'
            ],



            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

在上面的网格视图中,当我单击“详细信息”按钮时,我希望弹出一个模式


谢谢,

是的,这是可能的。要实现此目的,请执行以下步骤

Modal
代码添加到
GridView
代码上方

<?php
    yii\bootstrap\Modal::begin(['id' =>'modal']);
    yii\bootstrap\Modal::end();
?>
然后在查看页面的顶部或底部注册JavaScript

$this->registerJs("$(function() {
   $('#popupModal').click(function(e) {
     e.preventDefault();
     $('#modal').modal('show').find('.modal-content')
     .load($(this).attr('href'));
   });
});");

嘿,只有模态体显示没有页眉和页脚用于添加页眉和页脚请看这个@Bloodhound-也许您看到了Eignart Onkel的(其他)答案和/或GAMITG对您的评论的回复帮助,但如果没有,Eignart的答案(可能会被删除)建议将
find('.modal content')
更改为
find(“.modal body”)
$this->registerJs("$(function() {
   $('#popupModal').click(function(e) {
     e.preventDefault();
     $('#modal').modal('show').find('.modal-content')
     .load($(this).attr('href'));
   });
});");