2015-10-03 23 views
7

Chciałbym wyświetlić modal po kliknięciu przycisku wewnątrz widoku siatki. czy jest to możliwe przy gridview yii2?Modal wyskakuje w widoku siatki w 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'], 
     ], 
    ]); ?> 

w powyższym widoku siatki chcę modalne popup po kliknięciu na przycisk „szczegóły”.

dziękuję,

Odpowiedz

9

Tak, jest to możliwe. Aby to osiągnąć, wykonaj poniższe czynności.

Dodaj kod Modal powyżej kodu GridView.

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

Po tym dodać przycisk id w przycisku szczegółów. jak jak

[ 
    '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' 
], 

I niż zarejestrować JavaScript w górnej lub dolnej części widoku strony.

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

hej tylko modalne ciało jest wyświetlany bez nagłówka i stopki nie – Bloodhound

+1

dodawania nagłówka i stopki zobaczyć http://www.yiiframework.com/doc-2.0/yii-bootstrap-modal.html – GAMITG

+0

@Bloodhound - być może widziałeś (inną) odpowiedź Eignarta Onkela i/lub pomógł ci GAMITG w odpowiedzi na twój komentarz, ale na wszelki wypadek odpowiedź Eignarta (która może zostać usunięta) sugeruje zmianę "find (". modal-content "). do 'find ('. modal-body')'. –