模态弹出窗口中缺少页眉和页脚

时间:2015-11-17 04:56:00

标签: yii2 bootstrap-modal

我想在网格视图中有一个模态弹出窗口。我在index.php中使用了以下代码

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use backend\models\Relations;


$this->title = Yii::t('app', 'Members');
$this->params['breadcrumbs'][] = $this->title;

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

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


<div class="members-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a(Yii::t('app', 'Create Members'), ['create'], ['class' => 'btn btn-success']) ?>
    </p>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        // 'filterModel' => $searchModel,
        'columns' => [

            ['header'=>'Popup',
            'value'=> function($data)
                    { 
                        return  Html::a(Yii::t('app', ' {modelClass}', [
                            'modelClass' => 'View',
                        ]), ['members/view','id'=>$data->id], ['class' => 'btn btn-success','id' => 'popupModal']

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


            ['class' => 'yii\grid\ActionColumn','template'=>'{update}{delete}'],
        ],
    ]); ?>

</div>

这是我的控制器代码

  public function actionView($id)
    {
        return $this->renderAjax('view', [
            'model' => $this->findModel($id),
        ]);
    }

现在模态弹出但不是以所需的方式。我缺少页眉和页脚(没有关闭按钮)。enter image description here

1 个答案:

答案 0 :(得分:0)

我使用下面的模型,我在顶部使用Modal。您可以在使用时使用它。我的模态代码是这样的,它可以很好地工作。

<?php
Modal::begin([
'id' => 'modal',
    'size'=>'modal-lg',
    'class' => '',
    ]);
echo "<div id='modalContent'></div>";
Modal::end();
?> 

并将所需内容加载到div&#34;模态内容&#34;并使用页脚和标题选项,您可以根据需要修改您的模态。对于那些选项,请参阅以下文档。 http://www.yiiframework.com/doc-2.0/yii-bootstrap-modal.html