Modal popup with grid in yii2

Question

I would like to open modal when I click the button inside the grid. is this possible with gridview yii2?

<?= 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'], ], ]); ?> 

in the grid view above, I want the modal to pop up when I click the details button.

thanks,

Answer 1

Yes it is possible. To do this, follow these steps.

Add the Modal code above the GridView code.

 <?php yii\bootstrap\Modal::begin(['id' =>'modal']); yii\bootstrap\Modal::end(); ?> 

After that, add id to your details button. For example,

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

And how to register JavaScript at the top or bottom of the view page.

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