Yii2 之modal弹窗使用实例

Modal弹窗是一款bootstrap的js插件，使用方便,显示效果好。

使用效果图
效果还是很漂亮的,


使用方法:
1、在view层需要点击出现弹窗的位置创建一个按钮，用于调modal的显示,当然需要在;视图层引入类:
 

use yii\helpers\Html;
//按纽
Html::a('编辑', '#', ['id' => 'edit',
                'data-toggle'=>'modal',
                'data-target'=>'#edit-modal',
                'data-url'=>Url::toRoute(['/news-comment/edit','id'=>$model->id,'page'=>$page]),]);

2、创建modal, 在底部创建或者顶部都可以, footer参数会在弹窗右下脚显示关闭按纽,我感觉跟右上脚重复给注释了

use yii\bootstrap\Modal;
Modal::begin([
    'id' => 'edit-modal',
    'header' => '<h4 class="modal-title">编辑评论</h4>',
    //'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a>',
]);

3、给弹窗按钮添加js点击事件

$js = <<<JS
    $(document).on('click', '#edit', function () {
        aUrl = $(this).attr('data-url');
        $.get(aUrl, {}, function (data) { $('.modal-body').html(data); } );
    });
JS;
$this->registerJs($js);

4、修改控制器controller中操作方法如下, 注意第1步和第3步中的id=edit和#edit是对应的, 注意代码中加粗的Ajax与普通的写法不一样

    public function actionEdit($id) {
        $model = $this->findModel($id);
        if($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        } else {
            return $this->renderAjax('edit', [
                'model' => $model,
            ]);
        }
    }

5.当然需要创建edit视图文件,不然不能调用到数据

<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
?>
<div class="modal_pa">
    <?php $form = ActiveForm::begin(); ?>
        <?= $form->field($model, 'comment')->textArea(['style'=>'height:150px'])->label(''); ?>
        <div class="form-group">
            <?= Html::submitButton('修改', ['class' => 'btn btn-primary']) ?>
        </div>
    <?php ActiveForm::end(); ?>
</div>

到这里就能显示最上面的效果了, 跟普通的编辑内容是一样的