Задать вопрос Войти Регистрация

Как правильно работать в yii2 c bootstrap\modal?

Пользователь

от jeremy_larkin , в категории: PHP , 2 года назад

Как правильно работать в yii2 c bootstrap\modal?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от christine , 2 года назад

@jeremy_larkin 

  1. Импортируйте Bootstrap и jQuery:
1
2
3
4
5

registerCssFile('@web/css/bootstrap.min.css');
$this->registerJsFile('@web/js/jquery.min.js');
$this->registerJsFile('@web/js/bootstrap.min.js');

?>


  1. Откройте модальное окно при нажатии на кнопку:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
]);

echo 'Modal Content Here';

Modal::end();

?>


  1. Закройте модальное окно при нажатии на кнопку внутри модального окна:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

 '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. Динамическое содержание в модальном окне:
 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

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
]);

echo '';

Modal::end();

// Load content dynamically through AJAX
$script = <<< JS
$(document).on('click', '#dynamicButton', function(){
    $.ajax({
        method: 'get',
        url: '/site/modal-content',
        success: function(data){
            $('#modalContent').html(data);
        }
    });
});
JS;

$this->registerJs($script);

?>


  1. Добавление кнопки и формы в модальное окно:
 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

 '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();

// Submit form data through 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);

?>


  1. Пользовательские параметры для модального окна:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 'myModal',
    'header' => 'Hello World',
    'size' => 'modal-lg', // 'modal-sm', 'modal-md', or 'modal-lg'
    'toggleButton' => ['label' => 'Open Modal', 'class' => 'btn btn-primary'],
    'footer' => Html::button('Save', ['class' => 'btn btn-success', 'id' => 'saveButton']),
];

echo Modal::widget($options);

?>


  1. Использование событий модального окна:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

 'btn btn-primary', 'data-toggle' => 'modal', 'data-target' => '#myModal']);

Modal::begin([
    'header' => 'Hello World',
    'id' => 'myModal',
    'clientOptions' => [
        'show' => new yiiwebJsExpression("function(event) { console.log('Modal Opened'); }"),
        'hide' => new yiiwebJsExpression("function(event) { console.log('Modal Closed'); }"),
    ],
]);

echo 'Modal Content Here';

echo Html::button('Close Modal', ['class' => 'btn btn-danger', 'data-dismiss' => 'modal']);

Modal::end();

?>


Пользователь

от kurt , 6 месяцев назад

@jeremy_larkin 

Для работы с модальными окнами в Yii2 в сочетании с Bootstrap, нужно воспользоваться виджетом Modal.

  1. Начнем с импорта 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. Открываем модальное окно при нажатии на кнопку:
 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. Закрываем модальное окно при нажатии на кнопку внутри модального окна:
 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. Динамическое содержание в модальном окне:
 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. Добавление кнопки и формы в модальное окно:
 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 для создания и управления модальными окнами.

Похожие обсуждения:

Как правильно работать c foreach в php?
Как правильно работать с timestamp в laravel 5?
Как отловить закрытие модального окна bootstrap 3?
Как вызвать модальное окно в bootstrap?
Как создать модальные окна в bootstrap?
Как создать модальные окна в bootstrap?