1、use yii\bootstrap\Modal;

2、創(chuàng)建一個(gè)按鈕，用于調(diào)modal的顯示

echo Html::a('創(chuàng)建', '#', [
'id' => 'create',
'data-toggle' => 'modal',
'data-target' => '#create-modal',
'class' => 'btn btn-success',
]);

3、創(chuàng)建modal

<?php 
Modal::begin([
'id' => 'create-modal',
'header' => '<h4 class="modal-title">創(chuàng)建</h4>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]); 
$requestUrl = Url::toRoute('create');
$js = <<<JS
$.get('{$requestUrl}', {},
function (data) {
$('.modal-body').html(data);
} 
);
JS;
$this->registerJs($js);
Modal::end(); 
?>

4、修改我們的create操作如下

public function actionCreate()
{
$model = new Test();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(['index']);
} else {
return $this->renderAjax('create', [
'model' => $model,
]);
}
}

這個(gè)時(shí)候我們點(diǎn)擊按鈕[創(chuàng)建]，會(huì)看到modal彈窗，截圖如下。

有同學(xué)可能要說(shuō)，這個(gè)頁(yè)面沒必要異步加載過來(lái)。確實(shí)，你也可以直接在頁(yè)面上echo $this->renderAjax();，不過需要提醒的是，該操作記得修改表單提交的action哦。

關(guān)于modal的使用，此處有兩點(diǎn)需要提醒大家：

在控制元素（比如按鈕或者鏈接）上設(shè)置屬性 data-toggle="modal"，同時(shí)設(shè)置 data-target="#identifier" 或 href="#identifier" 來(lái)指定要切換的特定的模態(tài)框（帶有 id="identifier"）

以上，我們?cè)趛ii2中實(shí)現(xiàn)了modal的基本使用。

您可能感興趣的文章: