Yii 2 – Bootstrap Modal

Pekerjaan menerapkan modal  telah dipermudah oleh Bootstrap, yang merupakan kerangka kerja standar dan dibundel dengan aplikasi dasar.

Berikut ini adalah tutorial menggunakan pop up modal Bootstrap di Yii2 Framework

Tambahkan namespace  class use yii\bootstrap\Modal;

Sekarang, buat tombol untuk membuka modal

<?= Html::a('Create List', ['create'], ['class' => 'btn btn-success']) ?>

ganti ke

<?= Html::button('Create List', ['id' => 'modelButton', 'value' => \yii\helpers\Url::to(['list/create']), 'class' => 'btn btn-success']) ?>

NOTE: Hal-hal yang harus Anda miliki pada tombol adalah id modelButton karena itulah yang digunakan pada fungsi JS

Tambah layout bootstrap di modal

<?php

Modal::begin([
'header' => '<h4>HEADER</h4>',
'id' => 'model',
'size' => 'model-lg',
]);

echo "<div id='modelContent'></div>";

Modal::end();

?>

gunakan $this->renderAjax  untuk memuat konten halaman pada tata letak modal

public function actionCreate()
{
$model = new List();

if ($model->load(Yii::$app->request->post()) && $model->save()) {

return $this->redirect(['index']);
} else {
return $this->render('create', [
'model' => $model,
]);
}
}

ganti ke

public function actionCreate()
{
$model = new List();

if ($model->load(Yii::$app->request->post()) && $model->save()) {

return $this->redirect(['index']);
} else {
return $this->renderAjax('create', [
'model' => $model,
]);
}
}

Tambahkan script ke id modelButton

$(function(){
$('#modelButton').click(function(){
$('.modal').modal('show')
.find('#modelContent')
.load($(this).attr('value'));
});
});