@jeremy_larkin
Для работы с модальными окнами в Yii2 в сочетании с Bootstrap, нужно воспользоваться виджетом Modal.
- Начнем с импорта Bootstrap и jQuery в представлении:
1
2
3
4
5
6
7
8
|
<?php
use yiiootstrapModal;
use yiihelpersHtml;
$this->registerCssFile('@web/css/bootstrap.min.css');
$this->registerJsFile('@web/js/jquery.min.js');
$this->registerJsFile('@web/js/bootstrap.min.js');
?>
|
- Открываем модальное окно при нажатии на кнопку:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php
echo Html::button('Open Modal', ['class' => 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);
Modal::begin([
'header' => 'Hello World',
'id' => 'myModal',
]);
echo 'Modal Content Here';
Modal::end();
?>
|
- Закрываем модальное окно при нажатии на кнопку внутри модального окна:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
echo Html::button('Open Modal', ['class' => 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);
Modal::begin([
'header' => 'Hello World',
'id' => 'myModal',
]);
echo 'Modal Content Here';
echo Html::button('Close Modal', ['class' => 'btn btn-danger', 'data-dismiss' => 'modal']);
Modal::end();
?>
|
- Динамическое содержание в модальном окне:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?php
echo Html::button('Open Modal', ['class' => 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);
Modal::begin([
'header' => 'Hello World',
'id' => 'myModal',
]);
echo '<div id="modalContent"></div>';
Modal::end();
// Динамическая подгрузка контента через AJAX
$script = <<< JS
$(document).on('click', '#myModal', function(){
$.ajax({
method: 'get',
url: '/site/modal-content',
success: function(data){
$('#modalContent').html(data);
}
});
});
JS;
$this->registerJs($script);
?>
|
- Добавление кнопки и формы в модальное окно:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<?php
echo Html::button('Open Modal', ['class' => 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);
Modal::begin([
'header' => 'Hello World',
'id' => 'myModal',
]);
echo '';
echo Html::button('Save', ['class' => 'btn btn-success', 'id' => 'saveButton']);
echo Html::beginForm(['site/modal-save'], 'post', ['id' => 'modalForm']);
echo Html::textInput('name');
echo Html::endForm();
Modal::end();
// Отправка данных формы через AJAX
$script = <<< JS
$(document).on('click', '#saveButton', function(){
$.ajax({
method: 'post',
url: '/site/modal-save',
data: $('#modalForm').serialize(),
success: function(data){
$('#modalContent').html(data);
}
});
});
JS;
$this->registerJs($script);
?>
|
Таким образом, вы можете использовать Bootstrap и jQuery совместно с виджетом Modal в Yii2 для создания и управления модальными окнами.