Programmer Notes

modal form yii 2.0

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

view

index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
use yii\bootstrap\Modal;
use yii\helpers\Url;
...
<?= Html::button('Tambah Data', ['value' => Url::to(['create']),
'class' => 'btn btn-success', 'id' => 'modalButton']) ?>

Modal::begin([
'header' => '<h4>Tambah Data</h4>',
'id' => 'modal',
'size' => 'modal-sm',
]);
echo "<div id='modalContent'></div>";
Modal::end();
...

controller

YourController.php
1
2
3
4
5
6
7
8
9
...
public function actionCreate()
{
...
return $this->renderAjax('create', [
'model' => $model,
]);
}
...

assets

AppAsset.php
1
2
3
4
5
...
public $js = [
'js/main.js',
];
...

javascript

main.js
1
2
3
4
5
6
7
$(function(){
$('#modalButton').click(function(){
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
});